Le déclenchement de Validation de Formulaire HTML5
J'ai un formulaire avec plusieurs balises html fieldsets. J'ai un peu de Javascript qui affiche le champ des ensembles pour les utilisateurs un à un. Pour les navigateurs qui prennent en charge la validation HTML5, j'aimerais en faire usage. Cependant, j'ai besoin de le faire sur mes conditions. Je suis à l'aide de JQuery.
Lorsqu'un utilisateur clique sur un JS Lien pour passer à la prochaine fieldset, j'ai besoin de la validation d'arriver sur le courant fieldset et empêcher l'utilisateur d'aller de l'avant si il y a des problèmes.
Idéalement, l'utilisateur perd le focus sur un élément, de la validation.
Actuellement novalidate va et à l'aide de Javascript. Préférez l'utilisation de la méthode native. 🙂
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas déclencher le natif de validation de l'INTERFACE utilisateur, mais vous pouvez facilement profiter de l'API de validation sur l'arbitraire des éléments d'entrée:
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 estinvalid
puis le correspondant événement sera déclenché et pris au piège par le deuxième gestionnaire d'événement. Ce on met le focus à l'élément, mais qui pourrait être très ennuyeux, je suppose que vous avez une meilleure solution pour informer sur les erreurs. Voici un exemple de mon code ci-dessus.$('<input type="submit">').hide().appendTo($myForm).click().remove();
form.submit()
travail bien? Ou n'HTML5 besoin d'un bouton de soumission pour la validation, maintenant?.submit()
ne fonctionne pas pour moi. @philfreo la solution fonctionne. Hmm.TL;DR: ne Pas se soucier de vieux navigateurs? Utilisation
formulaire.reportValidity()
.Besoin héritage prise en charge du navigateur? Lire sur.
Il fait est possible de déclencher la validation manuellement.
Je vais utiliser du JavaScript dans ma réponse à améliorer la réutilisabilité, pas de jQuery est nécessaire.
Assumer le suivant formulaire HTML:
Et prenons nos éléments de l'INTERFACE utilisateur en JavaScript:
N'avez pas besoin d'un soutien pour les anciens navigateurs comme Internet Explorer? Ceci est pour vous.
Tous les navigateurs modernes soutien relativement nouveau
reportValidity()
méthode surform
éléments.Ça y est, nous y sommes. Aussi, voici un simple CodePen à l'aide de cette approche.
Approche pour les anciens navigateurs
Où
reportValidity()
n'est pas pris en charge, nous avons besoin de tromper le navigateur un peu. Alors, qu'allons-nous faire?form.checkValidity()
. Cela nous permettra de savoir si le formulaire est valide, mais ne pas montrer à la validation de l'INTERFACE utilisateur.Dans le code:
Ce code fonctionne dans pratiquement n'importe quel navigateur commun (je l'ai testé avec succès vers le bas pour IE11).
Voici un travail CodePen exemple.
Dans une certaine mesure, Vous POUVEZ
trigger
HTML5 de la validation du formulaire et afficher les informations de l'utilisateur, sans soumettre le formulaire de!De deux boutons, l'un pour la valider, l'une pour présenter
Définir un
onclick
d'écoute sur le bouton valider pour définir un indicateur global(direjustValidate
) pour indiquer ce sur est destiné à vérifier la validation du formulaire.Et de définir un
onclick
d'écoute sur le bouton "soumettre" pour définir lejustValidate
drapeau à false.Puis dans le
onsubmit
gestionnaire de la forme, vous vérifiez l'indicateurjustValidate
de décider de la valeur de retour et d'invoquer lapreventDefault()
pour arrêter le formulaire pour soumettre. Comme vous le savez, le HTML5 validation de formulaire(et l'interface graphique de l'indice pour l'utilisateur) est préformé avant laonsubmit
cas, et même si le formulaire est VALIDE, vous pouvez arrêter de les envoyer par retour de falsification ou invoquerpreventDefault()
.Et, en HTML5, vous avez une méthode pour vérifier le formulaire de validation: la
form.checkValidity()
, alors vous pouvez savoir si le formulaire est valide ou non dans votre code.OK, voici la démo:
http://jsbin.com/buvuku/2/edit
Un peu facile de faire ajouter ou supprimer la validation HTML5 pour les balises html fieldsets.
Je ne suis pas sûr que ça vaut le coup de me taper tout cela en place à partir de zéro depuis cet article publié dans Une Liste à Part fait un assez bon travail en expliquant cela. MDN a également un guide pratique pour les formulaires HTML5 et de validation (couvrant l'API et aussi l'CSS).
Code Html:
javascript( à l'aide de Jquery):
Espère que cela va vous aider à
JS:
HTML:
Je trouve pas le truc:
Il suffit de retirer le formulaire de
target
attribut, puis d'utiliser un bouton submit pour valider le formulaire et afficher les astuces, vérifier si le formulaire est valide, grâce à JavaScript, et ensuite de poster quoi que ce soit. Le code suivant fonctionne pour moi:Quand il y a un très complexes (en particulier asynchrone) processus de validation, il existe une solution simple:
Une autre façon de résoudre ce problème:
Uncaught TypeError: $(...).oninvalid is not a function
et je ne le vois pas dans le jQuery docs.