Comment valider les éléments de formulaire HTML dans javascript

category Ordinateurs et logiciels / Programmation / Html

La validation est un élément important de travailler avec des formulaires HTML. Malheureusement, pas tous les navigateur prend en charge les fonctionnalités de validation de HTML5. L'exemple que vous trouverez ici ne fonctionnera pas avec Internet Explorer car Internet Explorer ne parvient pas à soutenir l'une des fonctionnalités de validation HTML5.

Une grande partie de la validation des données en HTML5 est de créer le bon type de forme. Le code suivant montre un formulaire simple avec un nom, numéro de téléphone, et deux champs de mot de passe (un original et une confirmation).




Les deux premiers champs utilisent la validation automatique fourni par HTML5. Notez l'utilisation de la requis attribuer dans les deux cas, ce qui signifie que l'utilisateur doit saisir une valeur (pas nécessairement une valeur correcte).
En outre, le espace réservé attribut fournit un indice quant à ce que l'utilisateur doit taper, ce qui est toujours une bonne première étape dans l'obtention d'informations. La longueur maximale attribut empêche les utilisateurs d'essayer de taper trop ou quelqu'un d'entrer un script à la place du contenu. De même, la motif attribut regarde pour des informations spécifiques de l'utilisateur.
Les messages d'erreur générique qui fournit HMTL5 sont acceptables, mais guère éclairant. Cet exemple montre comment utiliser la x-moz-errormessage attribuer afin de créer un message d'erreur personnalisé. De nombreux navigateurs ne supportent pas cet attribut, afin que les utilisateurs peuvent toujours voir le message d'erreur générique, mais il ya au moins une chance que les utilisateurs vont voir quelque chose qui est un peu plus ciblé vers fournissant des informations utiles.
Les deux champs de mot de passe ne peuvent pas compter sur la validation HTML5 standard. Dans ce cas, vous devez utiliser javascript afin de confirmer que l'utilisateur a entré le même mot de passe dans les deux champs et que les champs font, en effet, contenir un mot de passe. Voici la ValidatePassword () fonction utilisée pour effectuer la validation:
fonction ValidatePassword (P1, P2) {if (P1.value = P2.value || P1.value == "" || P2.value == ""!) {P2.setCustomValidity ("Le mot de passe est incorrect") - } else {P2.setCustomValidity ("") -}}
L'exemple vérifie que les deux champs de mot de passe contiennent une entrée et que l'entrée est le même dans les deux champs. Bien sûr, votre chèque de mot de passe pourrait faire plus. Le message d'erreur apparaît comme un pop-up. Remarquez comment chaque champ contient un conseil utile sur ce qu'il faut taper.
image0.jpg
 
 
 
 
 
 
 
 
Articles Similaires
 
  

 
 
A propos Auteur
 
  Comment utiliser les balises d'entrée dans les formulaires HTML5 Comment utiliser les balises d'entrée dans les formulaires HTML5 
Les balises que vous utilisez pour solliciter les commentaires des visiteurs de votre site constituent l'essentiel de toute forme. HTML prend en charge une variété d'options d'entrée, à partir des champs de texte à des boutons radio et à…
  Comment utiliser les champs de mot de passe et les champs cachés dans votre formulaire de html5 Comment utiliser les champs de mot de passe et les champs cachés dans votre formulaire de html5 
UN champ Mot de passe est un champ spécial de texte sur un formulaire web qui ne comporte pas ce que les types d'utilisateurs. Chaque touche est représentée à l'écran par un personnage fictif, comme un astérisque ou une balle, de sorte que…
  Comment utiliser les champs de texte dans votre formulaire de html5 Comment utiliser les champs de texte dans votre formulaire de html5 
Vous pouvez utiliser une variété de types de champs d'entrée dans vos formulaires, tels que texte, mot de passe, radio (bouton), case, caché, recherche, tél (numéro de téléphone), URL, email (adresse), datetime, date, mois, semaine, temps,…
  5 astuces Html5 forme d'entrée 5 astuces Html5 forme d'entrée 
La façon la plus courante pour obtenir l'entrée d'utilisateur pour un programme javascript est en utilisant des éléments de formulaire HTML. La dernière version de HTML, HTML5, dispose de plusieurs nouveaux éléments de formulaire et les…
  Nouveaux trucs HTML5 / CSS3 pour la validation Nouveaux trucs HTML5 / CSS3 pour la validation 
HTML5 et CSS3 ajouter un peu plus de trucs pour simplifier la validation, et ils sont absolument merveilleux. Alors que vous pouvez toujours utiliser javascript et les expressions régulières pour valider vos pages, HTML5 promet une solution…
  Comment effectuer la validation de php Comment effectuer la validation de php 
Votre objectif global est de faire en sorte que toute entrée reçue de l'utilisateur, que ce soit à partir d'un formulaire web, un service Web, ou ailleurs, est contrôlée et filtrée par la validation de PHP.Afin de passer des erreurs de retour…
  Comment utiliser PHP pour construire une forme de HTML5 avec des éléments complexes Comment utiliser PHP pour construire une forme de HTML5 avec des éléments complexes 
Pour un exemple d'utilisation de PHP pour créer des formulaires HTML5 plus complexes, regarder par-dessus monty.html. Ce programme est un hommage à l'un des meilleurs films de tous les temps. (Vous pourriez avoir à louer ce film si vous allez…
  Comment ajouter javascript validation pour un formulaire web Comment ajouter javascript validation pour un formulaire web 
Vous pouvez ajouter la validation javascript à un formulaire web. Si vous avez un formulaire, vous devrez vous connecter à la forme de soumettre événement. Si vous utilisez jQuery, le faire est vraiment, vraiment facile. Le processus de…
  Comment affiner votre web validation de formulaire Comment affiner votre web validation de formulaire 
Après que vous avez vérifié vos champs requis et fourni une rétroaction à l'utilisateur, vous avez besoin d'affiner la validation de votre formulaire Web. Avant de le faire, vous devriez faire une pause et regarder le code que vous avez ajouté…
  Comment valider les numéros dans les champs de formulaire Web Comment valider les numéros dans les champs de formulaire Web 
Validation des numéros dans un formulaire Web peut impliquer une expression régulière, si vous vous attendez à un certain format ou le nombre de chiffres, ou peut impliquer maths si vous êtes à la recherche de certaines valeurs (ou pourraient…
  Comment valider les formulaires Web Comment valider les formulaires Web 
La validation des formulaires est le processus par lequel vous examinez les données d'un formulaire Web pour vous assurer que ce sont les données correctes et attendues dans le bon format. Il existe deux types généraux de la validation, côté…
  Attributs de nouveaux éléments de formulaire dans html5 Attributs de nouveaux éléments de formulaire dans html5 
HTML5 introduit de nouveaux éléments de formulaire et donne tous les éléments de formulaire quelques nouveaux goodies. Comme vous concevez et construisez des pages Web, vous pouvez appliquer ces nouveaux attributs et les capacités à tout…
  Comment construire une case à cocher dans votre formulaire de html5 Comment construire une case à cocher dans votre formulaire de html5 
Parfois, vous voulez que vos utilisateurs de pages Web pour indiquer si l'information est vraie ou fausse. Le HTML5 case élément est parfait pour ce genre d'entrée, car l'utilisateur peut cliquer pour sélectionner ou désélectionner l'option.…
  Comment valider et confirmer les mots de passe dans dreamweaver Comment valider et confirmer les mots de passe dans dreamweaver 
Outils Dreamweaver CS6 pour la collecte et conforme mots de passe fonctionnent comme ceci: D'abord, vous créez un champ de mot de passe en utilisant un widget Validation Spry, puis vous créez un champ de confirmation à l'aide d'un widget…
 
 
 »  »  »  » Comment valider les éléments de formulaire HTML dans javascript