web-dev-qa-db-fra.com

Déclencher la validation HTML5 standard (formulaire) sans utiliser le bouton d'envoi?

Tous ceux qui savent comment déclencher la validation standard HTML5 dans un formulaire sans utiliser de bouton d'envoi? (JavaScript ou jQuery).

Je fais pas je veux envoyer une demande POST/GET, je ne fais que la validation.

javascriptjqueryformshtml5
61
Mattias Wolff

La réponse acceptée à cette question semble être ce que vous cherchez. 

Résumé court: dans le gestionnaire d'événements pour l'envoi, appelez event.preventDefault().

19
Rick Liddle

Après quelques recherches, j'ai trouvé le code suivant qui devrait être la réponse à votre question. (Au moins cela a fonctionné pour moi)

Utilisez d'abord ce morceau de code. $(document).ready s'assure que le code est exécuté lorsque le formulaire est chargé dans le DOM:

$(document).ready(function()
{
    $('#theIdOfMyForm').submit(function(event){
        if(!this.checkValidity())
        {
            event.preventDefault();
        }
    });
});

Ensuite, appelez simplement $('#theIdOfMyForm').submit(); dans votre code.

METTRE À JOUR

Si vous souhaitez réellement indiquer quel champ l'utilisateur s'est trompé dans le formulaire, ajoutez le code suivant après event.preventDefault();

$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
    if(!this.validity.valid)
    {
        $(this).focus();
        // break
        return false;
    }
});

Cela mettra l'accent sur la première entrée invalide.

26
DraughtGlobe

Vous pouvez utiliser reportValidity , mais la prise en charge de votre navigateur est encore médiocre. Cela fonctionne sur Chrome, Opera et Firefox mais pas sur IE, ni Edge ou Safari:

var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
    if (myform.reportValidity) {
        myform.reportValidity();
    } else {
        //warn IE users somehow
    }
}

( checkValidity a un meilleur support, mais ne fonctionne pas non plus sur IE <10.)

14
mhm

Vous devez soumettre le formulaire pour que la validation html5 fonctionne. Il y a un moyen de contourner le problème pour obtenir ce que vous voulez. Se le code: 

<body>
    <h1>Validation Example</h1><br />
    <h2>Insert just 1 digit<h2>
    <form id="form" onsubmit="return false">
        <label>Input<input type="text" pattern="[0-9]" id="input" /></label> 
        <input type="submit" class="hide" id="inputButton">         
    </form>
</body>

Voir un exemple ici

Remarque: utiliser form.submit () n'a pas fonctionné pour moi. J'ai donc créé un bouton d'envoi masqué, qui se déclenche sur keyup. Ne me demande pas pourquoi. Peut-être que quelqu'un pourrait clarifier cela. 

10
john.dou.2011

Réponse courte, non, il n’ya aucun moyen de «déclencher» la fonctionnalité par défaut de la bulle html5 en ligne avant la soumission du formulaire. Vous pouvez checkValidity() sur certaines entrées, mais cela ne fonctionne pas à nouveau comme vous le souhaitez. Si vous souhaitez continuer à envoyer le formulaire une fois la validation terminée, vous pouvez toujours traiter ce style en procédant comme suit:

Remarque: sur les formulaires pour lesquels vous ne souhaitez pas que les styles CSS de validation soient appliqués, vous pouvez simplement ajouter l'attribut novalidate au formulaire.

HTML:

<form name="login" id="loginForm" method="POST">
    <input type="email" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="LOG IN" class="hero left clearBoth">
</form>

Si vous n'utilisez pas SCSS, je vous conseillerais vivement de vous renseigner, car il est beaucoup plus facile à gérer, facile à écrire et moins compliqué. Note: Dans l'exemple de violoneux, j'ai le css exact que cela va compiler. J'ai également inclus un exemple de style bulle.

SCSS:

form:not([novalidate])            {
  input, textarea                 {
    &:required                    {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
    &:required:valid              {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
    &:not(:focus):valid           {box-shadow: none;border: 1px solid $g4;}
    &:focus:invalid               {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center;  @include box-shadow(0 0 5px #d45252); border-color: #b03535}  
  }
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
  &:after {
     @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
  }
  .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}

JAVASCRIPT:

Ici, nous pouvons faire des trucs géniaux pour utiliser les messages par défaut et les hériter à l’intérieur de votre propre "message bulle" ou boîte d’erreur.

var form    = $('form');
var item    = form.find(':invalid').first();
var node    = item.get(0);                       
var pos     = item.position();                
var message = node.validationMessage || 'Invalid value.'; 
var bubble  = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left  + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();        
bubble.insertAfter(item);

DEMO: 

http://jsfiddle.net/shannonhochkins/wJkVS/

Profitez-en et j'espère aider les autres avec la validation de formulaire au format HTML5, car elle est géniale et doit être diffusée!

Shannon

2
Shannon Hochkins

Ceci est mon implémentation de la solution suggérée par @mhm, dans laquelle j'ai abandonné l'utilisation de jQuery.

La variable formId contient l'identifiant du formulaire et msg est un objet avec les messages de mon application.

Cette implémentation essaie de notifier l'utilisateur avec les messages d'erreur HTML 5 natifs. Si ce n'est pas possible, alerter un message d'erreur de formulaire générique.

S'il n'y a pas d'erreur, je soumets le formulaire.

let applyForm = document.getElementById(formId);

if (!applyForm.checkValidity()) {
  if (applyForm.reportValidity) {
    applyForm.reportValidity();
  } else {
    alert(msg.ieErrorForm);
  }
} else {
  applyForm.submit();
}
1
Dayron Gallardo

form.submit () ne fonctionne pas car la validation HTML5 est effectuée avant la soumission du formulaire . Lorsque vous cliquez sur un bouton d'envoi, la validation HTML5 est déclenchée, puis le formulaire est soumis si la validation aboutit.

1
p5yk0

j'utilisais 

objectName.addEventListener('click', function() {
event.preventDefault();
}

mais son show error " event est indéfini " donc dans ce cas, utilisez le paramètre event comme 

objectName.addEventListener('click', function(event) {
event.preventDefault();
}

maintenant ça marche bien

0
sms247

Je pense que c'est plus simple:

$('submit').click(function(e){
if (e.isValid())
   e.preventDefault();
//your code.
}

cela arrêtera la soumission jusqu'à ce que le formulaire soit valide.

0
aleXela

Je sais que c'est un sujet ancien, mais lorsqu'il existe un processus de validation très complexe (surtout asynchrone), il existe une solution de contournement simple:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>
0
Nadi h

Comme indiqué dans les autres réponses, utilisez event.preventDefault () pour empêcher la soumission du formulaire.

Pour vérifier le formulaire avant d’écrire une petite fonction jQuery, vous pouvez utiliser (notez que l’élément a besoin d’un ID!)

(function( $ ){
    $.fn.isValid = function() {
        return document.getElementById(this[0].id).checkValidity();
    };
})( jQuery );

exemple d'utilisation

 $('#submitBtn').click( function(e){

        if( $('#registerForm').isValid() ){
            // do the request
        }else{
            e.preventDefault();
        }
    });
0
Karl Adler

Essayez HTMLFormElement.reportValidity () où cette fonction invoquera les validations en entrée.

0
Lex Feria