Validation HTML5 lorsque le type d’entrée n’est pas «submit»

J’utilise HTML5 pour valider des champs. Je soumets le formulaire en utilisant JavaScript sur un clic de bouton. Mais la validation HTML5 ne fonctionne pas. Cela ne fonctionne que lorsque le type d’entrée est submit . Pouvons-nous faire autre chose que d’utiliser la validation JavaScript ou de modifier le type à submit ?

Ceci est le code HTML:

   

Je soumets le formulaire dans la fonction submitform() .

Le processus de validation du formulaire HTML5 est limité aux situations où le formulaire est soumis via un bouton d’envoi. L’ algorithme de soumission de formulaire indique explicitement que la validation n’est pas effectuée lorsque le formulaire est soumis via la méthode submit() . Apparemment, l’idée est que si vous soumettez un formulaire via JavaScript, vous êtes censé faire de la validation.

Toutefois, vous pouvez demander une validation de formulaire (statique) par rapport aux contraintes définies par les atsortingbuts HTML5, à l’aide de la méthode checkValidity() . Si vous souhaitez afficher les mêmes messages d’erreur que le navigateur ferait dans la validation de formulaire HTML5, je crains que vous deviez vérifier tous les champs contraints, car la propriété validityMessage est une propriété des champs (contrôles), pas la forme . Dans le cas d’un seul champ contraint, comme dans le cas présenté, c’est bien sûr évident:

 function submitform() { var f = document.getElementsByTagName('form')[0]; if(f.checkValidity()) { f.submit(); } else { alert(document.getElementById('example').validationMessage); } } 

Il se peut que je sois en retard, mais la façon dont je l’ai fait était de créer une entrée de soumission masquée et d’appeler le gestionnaire de clic lors de la soumission. Quelque chose comme (en utilisant jquery pour la simplicité):

     

Vous devez utiliser la balise de formulaire contenant vos entrées. Et type de saisie soumettre.
Cela marche.

 

Comme la validation HTML5 ne fonctionne qu’avec le bouton de soumission, vous devez le conserver. Vous pouvez éviter l’envoi du formulaire, même s’il est valide en empêchant l’action par défaut en écrivant le gestionnaire d’événement pour le formulaire.

 document.getElementById('testform').onsubmit= function(e){ e.preventDefault(); } 

Cela donnera votre validation si elle est invalide et ne soumettra pas le formulaire une fois valide.

Essayez avec vous pouvez effectuer la fonctionnalité de submitform() en faisant

Travail de validation HTML5 uniquement Lorsque le type de bouton est soumis

changement —

  

À —

  

Soit vous pouvez changer le type de bouton pour submit

  

Ou vous pouvez masquer le bouton de soumission, garder un autre bouton avec le type = “bouton” et avoir un événement de clic pour ce bouton

 

Essayez ceci:

  
firstName :
lastName :
email :

Je voulais append une nouvelle façon de faire que je viens de rencontrer. Même si la validation de formulaire ne s’exécute pas lorsque vous soumettez le formulaire à l’aide de la méthode submit() , rien ne vous empêche de cliquer sur un bouton d’envoi par programmation. Même si c’est caché.

Avoir un formulaire:

 

Cela déclenchera la validation du formulaire:

 function doFancyStuff() { $("#submit-button").click(); } 

Ou sans jQuery

 function doFancyStuff() { document.getElementById("submit-button").click(); } 

Dans mon cas, je fais un tas de validation et de calculs lorsque le bouton de soumission de faux est pressé, si ma validation manuelle échoue, alors je sais que je peux cliquer par programmation sur le bouton de soumission masqué et afficher la validation du formulaire.

Voici un jsfiddle très simple montrant le concept:

https://jsfiddle.net/45vxjz87/1/