Déclenchement de la Validation de formulaire HTML5

, Il en fait est possible de déclencher la validation manuelle. (La question est vraiment ancienne, mais elle apparaît au-dessus de Google, le cas d'utilisation est toujours valide et il n'y a pas encore de bonne réponse.)

Je vais utiliser JavaScript simple dans ma réponse pour améliorer la réutilisabilité, aucune jQuery n'est nécessaire.

Supposons le formulaire HTML suivant:

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

Et nous allons saisir nos éléments D'interface utilisateur en JavaScript:

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

Mise À Jour Septembre 2018

Avec la libération de Microsoft Bord 17 avril 2018, tous les navigateurs modernes support relativement nouveau reportValidity() méthode sur form éléments.

Donc, si nous ne ciblons pas explicitement Internet Explorer ou certains vieux téléphones BlackBerry, notre pari le plus simple est de loin le suivant:

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

Voilà, c'est fini. En outre, voici un CodePen simple utilisant cette approche.

Si nous avons besoin de support pour les navigateurs plus anciens, nous devons utiliser la solution originale décrite dessous.

Alors, Que ferons-nous?

1. Vérifiez la validité du formulaire en appelant form.checkValidity(). Cela nous indiquera 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 de soumission temporaire et déclenchons un clic dessus. Puisque le formulaire n'est pas valide, nous savons {[31] } qu'il ne sera pas en fait soumettre, cependant, il montrera des conseils de validation à l'utilisateur. Nous allons supprimer le bouton de soumission temporaire immedtiately, de sorte qu'il ne sera jamais visible pour l'utilisateur.
3. si le formulaire est valide, nous n'avons pas besoin d'interférer du tout et de laisser l'utilisateur continuer.

Dans le code:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    const 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 n'importe quel navigateur commun (je l'ai testé avec succès jusqu'à IE11).

Voici un exemple de travail CodePen.

Je suppose que le problème de L'OP n'existe plus après tant d'années, mais pour tout le monde ayant le même cas d'utilisation (formulaire multi-pages): assurez-vous de désactiver les éléments dans les parties actuellement masquées du formulaire car la validation des champs invisibles entraînera une erreur de navigateur.

Dans une certaine mesure, vous pouvez trigger validation de formulaire HTML5 et montrer des conseils à l'utilisateur sans soumettre le formulaire!

Deux boutons, un pour valider, un pour soumettre

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

Et définissez un écouteur onclick sur le bouton submit pour définir l'indicateur justValidate sur false.

Ensuite, dans le gestionnaire onsubmit du formulaire, vous vérifiez l'indicateur justValidate pour décider de la valeur renvoyée et appeler le preventDefault() pour arrêter le formulaire à soumettre. Comme vous le savez, la validation du formulaire HTML5 (et l'indication GUI à l'utilisateur) est préformée avant l'événement onsubmit, et même si le formulaire est valide, Vous pouvez arrêter le formulaire en retournant false ou invoke 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 valide ou non dans votre code.

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

Un peu facile à faire ajouter ou supprimer la validation HTML5 aux fieldsets.

 $('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);

    });

});

Je ne suis pas sûr que ça vaut la peine pour moi de taper tout cela à partir de zéro puisque Cet article publié dans une liste à part fait un très bon travail pour l'expliquer. MDN a également un Guide pratique pour les formulaires HTML5 et la validation (couvrant L'API et aussi le CSS associé).

J'ai l'air de trouver l'astuce: Il suffit de supprimer la balise "cible" du formulaire, puis d'utiliser un bouton de soumission pour valider le formulaire et afficher des conseils, vérifier si le formulaire est valide via javascript, puis poster tout. 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>

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

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

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>