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 beaucoup plus facile. Lorsque vous utilisez les éléments d'entrée spéciaux, le navigateur vérifie automatiquement le champ de formulaire pour vous assurer qu'il est dans un format approprié.

Si l'entrée est pas valable, le formulaire (généralement) pas présenté, et la spéciale : invalide Pseudo-classe CSS sera associé avec le champ non valide. Il suffit de fournir à votre page CSS manipulation du : invalide Etat:

 : invalide {background-color: rouges}

Lorsque cet état de CSS est actif, tous les champs invalides auront la : invalide style. Par exemple, si vous avez une email champ défini et le contenu de ce champ est pas une adresse e-mail valide, le invalide style sera appliqué. Dès que l'adresse est dans le bon format, la invalide le style sera supprimé.

Le développeur n'a pas besoin d'ajouter tout autre code dans le formulaire. Il suffit d'ajouter CSS pour afficher les entrées invalides, et le navigateur fera le reste. On n'a même pas besoin de spécifier l'expression régulière pour les adresses e-mail ou d'autres champs de saisie de spécialité - l'expression régulière appropriée pour chaque type de champ est déjà intégré.

Notez que si un champ est obligatoire (à l' requis attribut), il sera considéré comme valide jusqu'à ce qu'elle contient une certaine valeur.

Il est possible que le navigateur va refuser de traiter une forme jusqu'à ce que tous les champs sont validés, mais ce comportement ne semble pas encore être universel parmi les navigateurs HTML5 conformes.

Si vous le souhaitez, vous pouvez désactiver la validation pour tout champ en ajoutant le novalidate attribuer à cet élément.

Comment ajouter un motif

La motif attribut vous permet de spécifier une expression régulière utilisée pour valider le formulaire. Si le contenu correspond à l'expression régulière, le domaine sera considérée comme valide. La motif attribut doit être utilisé que lorsque les techniques de validation standard ne sont pas suffisantes (qui est, vous utilisez un élément d'entrée ordinaire qui n'a pas un motif automatique) parce qu'il peut être difficile de déboguer les expressions régulières.

Lorsque vous spécifiez un modèle, vous devez également inclure une titre attribuer. Le titre devrait indiquer ce que le motif est. Le navigateur peut utiliser cela comme une astuce pour l'utilisateur. Il peut également être utile d'ajouter des informations de motif que le texte de l'espace réservé.

Comment marquer un champ comme l'exige

La requis attribut vous permet de spécifier un domaine particulier tel que requis. Les navigateurs supportant marquera tous les champs obligatoires (peut-être en les surlignant en rouge) si elles ne sont pas remplis. Certains navigateurs seront également envoyer un avertissement si l'utilisateur tente d'envoyer un formulaire avec les champs vides requis.

La spéciale : nécessaire pseudo-classe vous permet d'appliquer un style CSS à tous les éléments nécessaires à votre formulaire (en leur donnant une frontière ou background-color, par exemple). Voici un exemple de style CSS pour le marquage des éléments nécessaires avec une bordure rouge:

 : nécessaire {border: 1px solid rouges}

Si vous avez un champ obligatoire et il n'a pas de contenu, ce domaine va déclencher le invalide style.

Comment ajouter du texte de l'espace réservé

La espace réservé attribut vous permet d'ajouter une valeur d'espace réservé spéciale dans vos champs de texte. Cet espace réservé agit comme une étiquette temporaire indiquant le but du champ sans nécessiter une étiquette d'identification. Dès que l'utilisateur active le champ, le texte de l'espace réservé disparaît.

Tous les navigateurs ne supportent pas un texte de substitution. Les autres navigateurs vont tout simplement ignorer le espace réservé attribuer. De même, si le champ est déjà rempli, l'espace réservé ne sera pas visible. Pour ces raisons, il est toujours préférable d'ajouter une étiquette afin que les utilisateurs savent quoi taper dans chaque zone de texte. Texte d'espace réservé est particulièrement utile quand il est utilisé pour indiquer comment l'entrée doit être formaté.