Déclencher manuellement la validation d'un formulaire à l'aide de jQuery

Question

J'ai un formulaire avec plusieurs champs différents. J'ai un peu de jQuery qui affiche les ensembles de champs aux utilisateurs un par un. Pour les navigateurs qui supportent la validation HTML5, j'aimerais beaucoup l'utiliser. Cependant, j'ai besoin de le faire à mes conditions. J'utilise JQuery.

Lorsqu'un utilisateur clique sur un lien JS pour passer au champ suivant, j'ai besoin que la validation se fasse sur le champ actuel et bloque l'utilisateur pour qu'il puisse avancer s'il y a des problèmes.

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

J'utilise actuellement novalidate et jQuery. Je préférerais utiliser la méthode native :)

Answer 1

TL;DR : Se désintéresser des anciens navigateurs ? Utiliser form.reportValidity() .

Besoin d'un support pour les navigateurs anciens ? Lire la suite.

---

En fait, il s'agit est Il est possible de déclencher la validation manuellement.

J'utiliserai du 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 saisissons nos éléments d'interface utilisateur en JavaScript :

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

---

Vous n'avez pas besoin de prendre en charge les navigateurs traditionnels tels qu'Internet Explorer ? Ceci est pour vous.

Tous les navigateurs modernes soutien el reportValidity() méthode sur form éléments.

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

C'est tout, nous avons terminé. Aussi, nous vous invitons à vous rendre sur le site de la Commission européenne, voici un simple CodePen 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 vous-même. ponyfill / polyfill à votre disposition.

Où reportValidity() n'est pas pris en charge, nous devons tromper un peu le navigateur. Qu'allons-nous faire ?

1. Vérifier la validité du formulaire en appelant form.checkValidity() . Cela nous indiquera si le formulaire est valide, mais n'affichera 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 sur celui-ci. Si le formulaire n'est pas valide, nous savoir il ne le fera pas en fait Cependant, il affichera des conseils 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 besoin d'intervenir et nous laissons l'utilisateur continuer.

---

En 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 fonctionnel de CodePen.

Answer 2

Vous ne pouvez pas déclencher l'interface de validation native (voir l'édition ci-dessous), mais vous pouvez facilement tirer parti de l'API de validation sur des éléments de saisie 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 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 pris en charge par le second gestionnaire d'événements. Ce dernier redonne le focus à l'élément, mais cela pourrait être assez ennuyeux, je suppose que vous avez une meilleure solution pour notifier les erreurs. Voici un exemple fonctionnel de mon code ci-dessus .

EDITAR: Tous les navigateurs modernes soutien el reportValidity() pour la validation HTML5 native, par cette réponse .

Answer 3

Dans une certaine mesure, vous POUVEZ trigger Validation de formulaire HTML5 et affichage de conseils à l'utilisateur sans soumettre le formulaire !

Deux boutons, un pour valider, un pour soumettre

Fixer un onclick sur le bouton de validation pour mettre en place un indicateur global (disons justValidate ) pour indiquer que ce clic est destiné à vérifier la validation du formulaire.

Et fixer un onclick sur le bouton de soumission pour définir le justValidate à faux.

Ensuite, dans le onsubmit du formulaire, vous vérifiez l'indicateur justValidate pour décider de la valeur de retour et invoquer le preventDefault() pour empêcher le formulaire de se soumettre. Comme vous le savez, la validation du formulaire HTML5 (et l'indication de l'interface graphique à l'utilisateur) est effectuée avant que l'élément onsubmit et même si le formulaire est VALIDE, vous pouvez arrêter la soumission du formulaire en renvoyant false ou en invoquant preventDefault() .

Et, en HTML5, vous disposez d'une méthode pour vérifier la validation du formulaire : la fonction 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

Answer 4

Je ne suis pas sûr que cela vaille la peine pour moi de taper tout cela depuis le début. 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 et également le CSS correspondant).

Answer 5

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">