La validation de formulaire a toujours été ma partie la moins préférée du développement Web. Vous devez répéter la validation côté client et côté serveur, gérer de nombreux événements et vous soucier de la conception de l’élément de formulaire. Pour faciliter la validation du formulaire, la spécification HTML a ajouté de nouveaux attributs de formulaire tels que required Et pattern Pour servir de vérification très basique. Cependant, saviez-vous que vous pouvez contrôler la validation des archétypes avec JavaScript ?

validity

chaque élément de formulaire (inputpar exemple) fournit un fichier validity Propriété représentant un ValidityState. ValidityState Cela ressemble à ceci :

// input.validity
{
  badInput: false,
  customError: true,
  patternMismatch: false,
  rangeOverflow: false,
  rangeUnderflow: false,
  stepMismatch: false,
  tooLong: false,
  tooShort: false,
  typeMismatch: false,
  valid: false,
  valueMissing: true
}

Tous les biens de ValidityState Cela peut correspondre approximativement à un problème de validation spécifique : valueMissing correspondrait required attribut, tooLong Et tooShort allumette minLength Et maxLengthetc.

Vérifier la validité et définir un message de validation personnalisé

Chaque champ de formulaire fournit un message d’erreur par défaut pour chaque type d’erreur, mais il serait probablement préférable de définir un message plus personnalisé pour chacune de vos applications. Vous pouvez utiliser des champs de formulaire setCustomValidity Pour créer votre propre message :

// Check validity
input.checkValidity();

if(input.validity.valueMissing) {
  input.setCustomValidity('This is required, bro!  How did you forget?');
} else {
  // Clear any previous error
  input.setCustomValidity('');
}

Définissez simplement le message à travers setCustomValidity Non Montre Le message, cependant.

reportValidity

Pour afficher l’erreur à l’utilisateur, utilisez des éléments de formulaire reportValidity méthode:

// Show the error!
input.reportValidity();

L’indication d’erreur s’affichera immédiatement à l’écran. L’exemple suivant affiche l’erreur toutes les cinq secondes :

voir stylo sans adresse Écrit par David Walsh (@ Aile sombre) sur moi code.

Avoir des crochets dans le système de validation des archétypes est très précieux et j’aimerais que les développeurs l’utilisent davantage. Chaque site a sa propre conception pour la validation côté client, la gestion des événements, etc. Utilisons ce qui nous est fourni !