web-dev-qa-db-fra.com

un moyen de vérifier la validité des formulaires HTML5?

Est-il possible de vérifier si un élément d'entrée d'un formulaire html5 est valide en fonction du modèle que je lui ai défini? Je connais les choses de la classe psuedo .. mais j'espère que quelque chose comme: document.getElementById('petitionName').valid peut retourner true ou false ..

J'espère vraiment que je n'ai pas besoin de créer de javascript pour revérifier ce truc.

46
Henry

il existe deux façons de vérifier la validité.

  1. inputElement.checkValidity() renvoie true ou false
  2. inputElement.validity renvoie l'objet de validité-état. inputElement.validity.valid Retour true/false

Au lieu d'utiliser keyup, vous pouvez également utiliser l'événement 'input'. Tous les navigateurs, qui ont implémenté l'API de validation des contraintes, ont également implémenté l'événement d'entrée.

Si vous utilisez l'option 1 ci-dessus, Opera a un bogue ici et affichera son indice de validation. Vous devez donc utiliser 2.

J'ai créé une bibliothèque de formulaires html5, qui implémente toutes les fonctionnalités inconnues pour les navigateurs incapables + corrige les problèmes dans les navigateurs HTML5. Donc, tout fonctionne comme défini dans la spécification, mais il est construit sur jQuery. ( http://afarkas.github.com/webshim/demos/index.html ).

83

Vous pouvez utiliser l'attribut pattern .

Il le validera côté client, donc pas besoin de le valider à nouveau côté client.

Example

jsFiddle .

Mais , assurez-vous de le refaire côté serveur.

Notez également que la compatibilité du navigateur étant actuellement assez médiocre, JavaScript est la norme pour valider le côté client.

7
alex