Déclenchement de la validation de formulaire HTML5

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

Lorsqu'un utilisateur clique sur un lien JS pour passer au jeu de champs suivant, j'ai besoin que la validation se produise sur le jeu de champs actuel et empêche l'utilisateur d'avancer en cas de problème.

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

Actuellement, novalidate fonctionne et utilise Javascript. Préfère utiliser la méthode native. :)

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 se déclenche checkValiditysur chaque élément d'entrée dès qu'il perd le focus, si l'élément est invalidalors l'événement correspondant sera déclenché et piégé par le deuxième gestionnaire d'événements. Celui-ci ramène le focus sur 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 .

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

Besoin de la prise en charge de l'ancien navigateur? Continuer à lire.

Il est en fait possible de déclencher la validation manuellement.

J'utiliserai du JavaScript brut dans ma réponse pour améliorer la réutilisabilité, 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 anciens navigateurs comme Internet Explorer? Ceci est pour vous.

Tous les navigateurs modernes prennent en charge la reportValidity()méthode sur les forméléments.

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

Voilà, nous avons terminé. En outre, voici un codePen simple utilisant cette approche.

Approche pour les navigateurs plus anciens

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

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

Là où ce reportValidity()n'est pas pris en charge, nous devons tromper un peu 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 de validation.
2. Si le formulaire n'est pas valide, nous créons un bouton de soumission temporaire et déclenchons un clic dessus. Étant donné que la forme n'est pas valide, nous savons qu'il ne fait toutefois présenter, il montrera des notes de validation à l'utilisateur. Nous supprimerons immédiatement le bouton d'envoi temporaire, de sorte qu'il ne sera jamais visible par l'utilisateur.
3. Si le formulaire est valide, nous n'avons pas du tout besoin d'intervenir et de 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 à peu près tous les navigateurs courants (je l'ai testé avec succès jusqu'à IE11).

Voici un exemple de CodePen fonctionnel.

Dans une certaine mesure, vous POUVEZ la triggervalidation du formulaire HTML5 et montrer des conseils à l'utilisateur sans soumettre le formulaire!

Deux boutons, un pour valider, un pour soumettre

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

Et définissez un onclickécouteur sur le bouton d'envoi pour définir l' justValidateindicateur sur false.

Ensuite, dans le onsubmitgestionnaire du formulaire, vous vérifiez l'indicateur justValidatepour décider de la valeur de retour et invoquez le preventDefault()pour arrêter l'envoi du formulaire. Comme vous le savez, la validation du formulaire HTML5 (et l'indication GUI à l'utilisateur) est préformée avant l' onsubmitévénement, et même si le formulaire est VALIDE, vous pouvez arrêter l'envoi du formulaire en renvoyant false ou invoquer preventDefault().

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

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

Je ne suis pas sûr que cela vaille la peine pour moi de taper tout cela à partir de zéro puisque cet article publié dans A List Apart fait un très bon travail pour l'expliquer. MDN dispose également d'un guide pratique pour les formulaires HTML5 et la validation (couvrant l'API et le CSS associé).

Un peu facile à faire ajouter ou supprimer la validation HTML5 aux ensembles de 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);

    });

});

Il me semble trouver l'astuce: supprimez simplement l' targetattribut du formulaire , puis utilisez un bouton d'envoi pour valider le formulaire et afficher des indices, vérifiez si le formulaire est valide via JavaScript, puis publiez ce que vous voulez. 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>

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>

J'espère que ceci vous aidera

Lorsqu'il existe un processus de validation très complexe (en particulier 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>

Une autre façon de résoudre ce problème:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});