Validation de formulaire interactif HTML

Créer des formulaires en HTML est toujours un peu compliqué. Vous devez d'abord écrire correctement le balisage HTML, puis vous assurer que chaque élément du formulaire a une valeur utilisable avant de le soumettre, et enfin vous devez alerter l'utilisateur en cas de problème.

Heureusement, HTML5 a introduit de nouvelles fonctionnalités qui rendent cette tâche beaucoup plus facile. En particulier, les contrôles de formulaire ont été étendus pour prendre en charge les contraintes, permettant au navigateur de valider le contenu du formulaire côté client sans utiliser JavaScript.

WebKit dispose déjà d'un support partiel. Il est désormais possible d'utiliser les propriétés d'un contrôle de formulaire pour décrire les contraintes, puis d'utiliser l'API checkValidity() en JavaScript pour interroger la validité d'un contrôle de formulaire et de l'intégralité de la saisie du formulaire. Il est également possible d'utiliser l'API ValidityState pour comprendre quelle contrainte a été violée.

Cependant, WebKit ne prenait pas auparavant en charge la validation de formulaire HTML interactif, ce qui se produisait lorsque le formulaire était soumis (à moins que l'attribut novalidate ne soit défini sur l'élément

) ou lors de l'utilisation de l'API reportValidity(). De plus, nous sommes ravis d'annoncer que Webkit prend désormais en charge cette fonctionnalité, avec la fonctionnalité activée dans Safari Technology Preview 19. Avec la validation de formulaire interactive, WebKit validera désormais tous les contrôles de formulaire dans un formulaire. Si même un contrôle de formulaire viole la contrainte, WebKit mettra le focus d'entrée sur le premier, fera défiler la page de l'interface pour afficher le contrôle, puis affichera un message bulle à côté pour expliquer le problème.

Contraintes de vérification

​Type d'entrée

Certains types d'entrée ont des contraintes inhérentes. Si le type est défini sur "e-mail", "numéro" ou "URL", il vérifiera automatiquement si la valeur saisie est une adresse e-mail, un numéro ou une URL valide, par exemple :

<input type="email">

Attributs de vérification

Les propriétés suivantes peuvent être utilisées pour décrire les contraintes dans les contrôles de formulaire :

• obligatoire : indique à l'utilisateur qu'une valeur doit être saisie.

• 
  

• pattern="[a-z]" : indique à l'utilisateur qu'il doit saisir une valeur qui correspond à l'expression régulière JavaScript donnée.

• 
  

• minlength=x : indique à l'utilisateur qu'il doit saisir une valeur d'au moins x caractères.

• 
  

• maxlength=y : indique à l'utilisateur qu'il doit saisir une valeur d'au plus x caractères.

• 
  

• min=x : indique à l'utilisateur qu'il doit saisir une valeur supérieure ou égale à x. .

• 
  

• max=y : indique à l'utilisateur qu'il doit saisir une valeur inférieure ou égale à y.

• 
  

• step=x : indique à l'utilisateur qu'il doit saisir une valeur min plus un multiple de x.

Vérification des contraintes

La vérification des contraintes peut être déclenchée de la manière centralisée suivante :

• checkValidity() peut être appelé sur un élément de formulaire ou un contrôle de formulaire spécifique. Cette méthode retournera false si une contrainte est violée. Par la même occasion, cela déclenchera également un événement dit "invalide" sur l'élément qui viole la contrainte. Vous pouvez vérifier quelle contrainte a été violée à l'aide de l'objet ValidityState exposé via la propriété « validity » sur le contrôle de formulaire.

• 
  

• reportValidity() peut être appelé sur une contrainte de formulaire ou un contrôle de formulaire spécifique. Cela déclenche une validation interactive des contraintes. De plus, checkValidity() et reportValidity() placeront également le focus d'entrée sur le premier élément vérifié pour violer la contrainte et afficheront une bulle de message à côté de lui pour décrire le problème.

• 
  

• La validation du formulaire interactif se produit également lorsque le formulaire est soumis, sauf si l'attribut "novalidate" est défini sur l'élément .

Contraintes personnalisées

En utilisant JavaScript pour la validation et en tirant parti de l'API setCustomValidity(), vous pouvez implémenter des contraintes de validation plus complexes ou fournir des messages d'erreur plus utiles pour les entrées qui violent les contraintes.

JavaScript peut être déclenché par l'écoute d'un événement donné sur un contrôle de formulaire (par exemple : onchange, oninput, ...). Le code JavaScript exécuté peut alors valider les données du contrôle de formulaire puis utiliser setCustomValidity() pour mettre à jour le message d'erreur du contrôle :

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

Invite de bulle de message de vérification

Lors de la validation de formulaire interactif, une bulle décrivant le problème s'affichera à côté du premier contrôle de formulaire contenant des données qui violent les contraintes en cours de validation, comme ceci :

Certains messages de vérification localisés sont définis par défaut pour des contraintes spécifiques. Si vous souhaitez personnaliser le message de validation, pensez à utiliser l'API setCustomValidity(). Notez que WebKit prend également en charge l'API d'internationalisation de JavaScript, qui peut nous aider à localiser les messages de vérification personnalisés.

Résumé

La validation des formulaires interactifs HTML est désormais prise en charge dans Webkit et est activée dans Safari Technology Preview 19. Veuillez essayer notre démo en ligne pour découvrir cette fonctionnalité. Vous êtes également invités à signaler des bugs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!