web-dev-qa-db-fra.com

Déclenchement de la validation de formulaire HTML5

J'ai un formulaire avec plusieurs champs différents. J'ai du Javascript qui affiche les champs aux utilisateurs un à la fois. Pour les navigateurs prenant en charge la validation HTML5, j'aimerais bien l'utiliser. Cependant, je dois le faire selon mes conditions. J'utilise JQuery.

Lorsqu'un utilisateur clique sur un lien JS pour passer au groupe de champs suivant, j'ai besoin que la validation soit effectuée sur le groupe de champs actuel et empêche l'utilisateur de progresser s'il y a des problèmes.

Idéalement, lorsque l'utilisateur perd le focus sur un élément, une validation aura lieu.

Actuellement, novalidate utilise le Javascript. Préférerait utiliser la méthode native. :)

javascriptjqueryvalidationhtml5
72
Drew

Vous ne pouvez pas déclencher l'interface utilisateur de validation native, mais vous pouvez facilement tirer parti de l'API de validation sur des éléments d'entrée arbitraires:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

Le premier événement déclenche checkValidity sur chaque élément d'entrée dès qu'il perd le focus. Si l'élément est invalid, l'événement correspondant sera déclenché et capturé par le deuxième gestionnaire d'événements. Celui-ci ramène l’attention à l’élément, mais cela pourrait être assez ennuyeux, je suppose que vous avez une meilleure solution pour signaler les erreurs. Voici un exemple de travail de mon code ci-dessus .

48
robertc

TL; DR: Vous ne vous souciez pas des anciens navigateurs? Utilisez form.reportValidity() .

Besoin d'un support de navigateur hérité? Continuer à lire.

En fait, il est est possible de déclencher la validation manuellement.

Je vais utiliser du code JavaScript simple dans ma réponse pour améliorer la réutilisation, aucun jQuery n’est nécessaire.

Supposons le formulaire HTML suivant:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

Et prenons nos éléments d'interface utilisateur en JavaScript:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

Vous n'avez pas besoin de support pour les navigateurs classiques tels qu'Internet Explorer? Ceci est pour vous.

Tous les navigateurs modernes support la méthode reportValidity() sur form.

triggerButton.onclick = function () {
    form.reportValidity()
}

Ça y est, nous avons terminé. En outre, voici un CodePen simple en utilisant cette approche.

Approche pour les anciens navigateurs

Vous trouverez ci-dessous une explication détaillée de la manière dont reportValidity() peut être émulé dans les anciens navigateurs.

Cependant, vous n'avez pas besoin de copier-coller ces blocs de code dans votre projet - il existe un ponyfill / polyfill facilement disponible pour vous.

Là où reportValidity() n'est pas supporté, il faut un peu tromper le navigateur. Alors, que ferons-nous?

  1. Vérifiez la validité du formulaire en appelant form.checkValidity(). Cela nous dira si le formulaire est valide, mais ne montrera pas l'interface utilisateur de validation.
  2. Si le formulaire n'est pas valide, nous créons un bouton d'envoi temporaire et cliquons dessus. Le formulaire n'étant pas valide, nous savons il ne le fera pas en fait soumettons. Cependant, il affichera des astuces de validation à l'utilisateur. Nous supprimerons immédiatement le bouton d'envoi temporaire afin qu'il ne soit jamais visible pour l'utilisateur.
  3. Si le formulaire est valide, nous n'avons pas besoin d'intervenir du tout et laisser l'utilisateur continuer.

Dans du code:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

Ce code fonctionnera dans pratiquement tous les navigateurs courants (je l’ai testé avec succès jusqu’à IE11).

Voici un exemple de travail avec CodePen.

68
Loilo

Dans une certaine mesure, vous POUVEZ trigger valider un formulaire HTML5 et montrer des astuces à l'utilisateur sans le soumettre!

Deux boutons, un pour valider, un pour soumettre

Définissez un écouteur onclick sur le bouton de validation pour définir un indicateur global (par exemple, justValidate) afin d'indiquer que ce clic est destiné à vérifier la validation du formulaire.

Et définissez un écouteur onclick sur le bouton d'envoi afin de définir l'indicateur justValidate sur false.

Ensuite, dans le gestionnaire onsubmit du formulaire, cochez l'indicateur justValidate pour déterminer la valeur renvoyée et appelez la preventDefault() pour arrêter le formulaire à soumettre. Comme vous le savez, la validation du formulaire HTML5 (et l'indicateur d'interface graphique utilisateur) est préformée avant l'événement onsubmit, et même si le formulaire est VALID, vous pouvez arrêter l'envoi du formulaire en renvoyant false ou en appelant la fonction preventDefault().

Et, en HTML5, vous avez une méthode pour vérifier la validation du formulaire: la form.checkValidity(), vous pouvez alors savoir si le formulaire est validé ou non dans votre code.

OK, voici la démo: http://jsbin.com/buvuku/2/edit

20
Xieranmaya

Je ne suis pas sûr que cela vaille la peine de taper tout cela à partir de zéro depuis cet article a été publié dans A List Apart l'explique assez bien. MDN a également un guide pratique pour les formulaires HTML5 et la validation (couvrant l’API ainsi que les CSS associées).

3
Anatoli Papirovski

Un peu facile d'ajouter ou de supprimer la validation HTML5 aux champs.

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});
3
wreleven

Code HTML:

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

javascript (en utilisant Jquery):

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

espérons que cela vous aidera

1
Hưng Trịnh

Il semble que je trouve le truc: il suffit de supprimer l'attribut de formulaire target, puis d'utiliser un bouton d'envoi pour valider le formulaire et d'afficher des astuces, de vérifier si le formulaire est valide via JavaScript, puis de publier n'importe quoi. Le code suivant fonctionne pour moi:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>
1
chenxin
var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("characters less than 10")
        
    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("characters equal to 10")
        
    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("characters greater than 10 and less than 20")
        
    }else if(field[0].validity.typeMismatch) {
        field[0].setCustomValidity("wrong email message")
        
    }else {
        field[0].setCustomValidity("") // no more errors
        
    }
    field[0].reportValidity()
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" id="field">
0
Ilya webdev