Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
| web:html:formulaires:validation [2023/04/08 18:23] – [Validation Javascript] jcheron | web:html:formulaires:validation [2023/04/21 23:44] (Version actuelle) – jcheron | ||
|---|---|---|---|
| Ligne 175: | Ligne 175: | ||
| </ | </ | ||
| - | ==== Validation Javascript ==== | + | ===== Validation Javascript |
| Il est maintenant possible d' | Il est maintenant possible d' | ||
| - | ^Propriété ^Rôle ^ | + | ==== Propriétés des éléments ==== |
| - | ^validationMessage | | | + | |
| + | ^Propriété ^Rôle ^Si true ^Si false ^ | ||
| + | ^validationMessage | Retourne le message de validation retourné par l' | ||
| + | ^validity.customError | renvoie **true** si l' | ||
| + | ^validity.patternMismatch | renvoie **true** si la valeur de l' | ||
| + | ^validity.rangeOverflow | renvoie **true** si la valeur de l' | ||
| + | ^validity.rangeUnderflow | renvoie **true** si la valeur de l' | ||
| + | ^validity.tooLong | renvoie **true** si la taille de l' | ||
| + | ^validity.typeMismatch | renvoie **true** si la valeur saisie a une incohérence de type avec celui attendu |**: | ||
| + | ^validity.valid | renvoie **true** si l' | ||
| + | ^validity.valueMissing | renvoie **true** si un élément requis n'a pas de valeur |**: | ||
| + | ^willValidate | Renvoie **true** si l' | ||
| + | ==== Méthodes ==== | ||
| + | ^Méthode ^Rôle ^ | ||
| + | ^checkValidity() | Renvoie **true** si la valeur de l' | ||
| + | ^setCustomValidity(message) | Défini un message de validation personnalisé | | ||
| + | |||
| + | ==== Exemple ==== | ||
| + | === Formulaire HTML === | ||
| + | |||
| + | <wrap info> | ||
| + | |||
| + | <sxh html> | ||
| + | <form novalidate> | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | < | ||
| + | <div class=" | ||
| + | </ | ||
| + | </ | ||
| + | === Feuille de style CSS === | ||
| + | |||
| + | <sxh css> | ||
| + | .message { | ||
| + | color: white; | ||
| + | border-radius: | ||
| + | padding: 8px; | ||
| + | display: none; | ||
| + | margin-top: 10px; | ||
| + | } | ||
| + | .message.error { | ||
| + | background-color: | ||
| + | display: block; | ||
| + | } | ||
| + | .message.valid { | ||
| + | background-color: | ||
| + | display: block; | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | === Validation Javascript === | ||
| + | |||
| + | <sxh javascript> | ||
| + | let form=document.querySelector(" | ||
| + | let mail=document.getElementById(" | ||
| + | let message=document.querySelector(' | ||
| + | |||
| + | form.addEventListener(" | ||
| + | event.preventDefault(); | ||
| + | let m=mail.value; | ||
| + | if (!mail.validity.valid) { | ||
| + | message.innerHTML = mymail.validationMessage; | ||
| + | message.className = " | ||
| + | } else { | ||
| + | message.innerHTML=`' | ||
| + | message.className = " | ||
| + | } | ||
| + | }); | ||
| + | mail.addEventListener(" | ||
| + | if (mail.validity.valid) { | ||
| + | message.innerHTML = ""; | ||
| + | message.className = " | ||
| + | } | ||
| + | }); | ||
| + | </ | ||
| < | < | ||
| < | < | ||
| Ligne 203: | Ligne 276: | ||
| <form id=" | <form id=" | ||
| <label for=" | <label for=" | ||
| - | <input type=" | + | <input type=" |
| < | < | ||
| <div class=" | <div class=" | ||
| Ligne 234: | Ligne 307: | ||
| </ | </ | ||
| + | ==== Articles ==== | ||
| + | |||
| + | * [[https:// | ||
jcheron