Validation des contraintes HTML5 pour les contrôles personnalisés

Question

Je voudrais vérifier si le nom d'utilisateur et l'adresse e-mail sont uniques du côté du client.

Existe-t-il un moyen d'ajouter une validation personnalisée pour la validation des contraintes ?

Ou existe-t-il une autre méthode recommandée ?

Je suppose que je dois envoyer asynchrone requête http (j'utilise node js côté serveur) mais j'aimerais suivre les meilleures pratiques pour celle-ci.

Answer 1

Vous pouvez faire une demande sur le flou de l'entrée pour vérifier si ce que l'utilisateur a écrit dans l'entrée est unique ou non et montrer le résultat à l'utilisateur avec une coche ou un X rouge ou vous pouvez montrer le résultat à l'utilisateur après qu'il ait cliqué sur le bouton d'inscription, mais je préfère la première solution.

Answer 2

Oui, vous pouvez utiliser le setCustomValidity de l'API de validation des contraintes, qui fait partie de chaque champ de formulaire (par exemple, HTMLInputElement).

<input name="username">
<script>
  const field = document.querySelector('[name="username"]');
  field.addEventListener('change', () => {
    fetch('https://example.com/myapiforcheckingusername' {
      method:'POST',
      body: JSON.stringify({username: field.value})
    }).then((response) => {
      const alreadyExists = // process response to check if username already exists

      if (alreadyExists) {
        field.setCustomValidity('The username already exists!');
      }
    });
  });
</script>

Le code ci-dessus montre comment effectuer une validation asynchrone sur un champ de saisie. Si le champ setCustomValidity n'est pas la chaîne vide, cela signifie qu'il s'agit d'une erreur de formulaire. Si l'erreur est une erreur de forme, elle doit être corrigée. checkValidity est appelé sur le formulaire d'accompagnement, il renvoie false ensuite.

Vous pouvez vérifier le Documentation MDN pour d'autres exemples en la matière.