| 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:12] – [Validation Javascript] jcheron | web:html:formulaires:validation [2023/04/21 23:44] (Version actuelle) – jcheron |
|---|
| </html> | </html> |
| |
| ==== Validation Javascript ==== | ===== Validation Javascript ===== |
| |
| Il est maintenant possible d'utiliser l'api de validation de contraintes HTML5, supportée par la plupart des navigateurs : | Il est maintenant possible d'utiliser l'api de validation de contraintes HTML5, supportée par la plupart des navigateurs : |
| |
| ^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'élément, prenant en compte les contraintes non satisfaites (en lecture seule) | | | |
| | ^validity.customError | renvoie **true** si l'élément a un message d'erreur personnalisé | | | |
| | ^validity.patternMismatch | renvoie **true** si la valeur de l'élément ne respecte pas le pattern fourni |**:invalid** | | |
| | ^validity.rangeOverflow | renvoie **true** si la valeur de l'élément est supérieure au max défini |**:invalid**, **:out-of-range** | | |
| | ^validity.rangeUnderflow | renvoie **true** si la valeur de l'élément est inférieure au min défini |**:invalid**, **:out-of-range** | | |
| | ^validity.tooLong | renvoie **true** si la taille de l'élément est supérieure à celle définie |**:invalid**, **:out-of-range** | | |
| | ^validity.typeMismatch | renvoie **true** si la valeur saisie a une incohérence de type avec celui attendu |**:invalid** | | |
| | ^validity.valid | renvoie **true** si l'élément passe tous les contrôles de validité |**:valid** | **:invalid** | |
| | ^validity.valueMissing | renvoie **true** si un élément requis n'a pas de valeur |**:invalid** | | |
| | ^willValidate | Renvoie **true** si l'élément est validé lors du submit | | |
| |
| | ==== Méthodes ==== |
| | ^Méthode ^Rôle ^ |
| | ^checkValidity() | Renvoie **true** si la valeur de l'élément passe la validation | |
| | ^setCustomValidity(message) | Défini un message de validation personnalisé | |
| | |
| | ==== Exemple ==== |
| | === Formulaire HTML === |
| | |
| | <wrap info>L'attribut **novalidate** du form désactive la validation HTML5 par défaut.</wrap> |
| | |
| | <sxh html> |
| | <form novalidate> |
| | <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> |
| | <input type="email" id="mail" name="mail"> |
| | <button>Envoyer</button> |
| | <div class="error"></div> |
| | </form> |
| | </sxh> |
| | === Feuille de style CSS === |
| | |
| | <sxh css> |
| | .message { |
| | color: white; |
| | border-radius: 4px; |
| | padding: 8px; |
| | display: none; |
| | margin-top: 10px; |
| | } |
| | .message.error { |
| | background-color: #db4764; |
| | display: block; |
| | } |
| | .message.valid { |
| | background-color: green; |
| | display: block; |
| | } |
| | </sxh> |
| | |
| | === Validation Javascript === |
| | |
| | <sxh javascript> |
| | let form=document.querySelector("form"); |
| | let mail=document.getElementById("mail"); |
| | let message=document.querySelector('.message'); |
| | |
| | form.addEventListener("submit", function (event) { |
| | event.preventDefault(); |
| | let m=mail.value; |
| | if (!mail.validity.valid) { |
| | message.innerHTML = mymail.validationMessage; |
| | message.className = "message error"; |
| | } else { |
| | message.innerHTML=`'${m}' est valide !`; |
| | message.className = "message valid"; |
| | } |
| | }); |
| | mail.addEventListener("input", function (event) { |
| | if (mail.validity.valid) { |
| | message.innerHTML = ""; |
| | message.className = "message"; |
| | } |
| | }); |
| | </sxh> |
| <html> | <html> |
| <style> | <style> |
| .my-error.active { | .my-error.active { |
| display: block; | display: block; |
| | } |
| | .my-error.valid { |
| | background-color: green; |
| } | } |
| </style> | </style> |
| <form id="form-js-validation" novalidate> | <form id="form-js-validation" novalidate> |
| <label for="mail-v">Pourriez-vous nous fournir une adresse mail ?</label> | <label for="mail-v">Pourriez-vous nous fournir une adresse mail ?</label> |
| <input type="email" id="mail-v" name="mailv"> | <input type="email" id="mail-v" name="mailv" required> |
| <button>Envoyer</button> | <button>Envoyer</button> |
| <div class="my-error"></div> | <div class="my-error"></div> |
| |
| myform.addEventListener("submit", function (event) { | myform.addEventListener("submit", function (event) { |
| | event.preventDefault(); |
| | let m=mymail.value; |
| if (!mymail.validity.valid) { | if (!mymail.validity.valid) { |
| let m=mymail.value; | error.innerHTML = mymail.validationMessage;//`'${m}' n'est pas une adresse email valide !`; |
| error.innerHTML = `'${m}' n'est pas une adresse email valide !`; | |
| error.className = "my-error active"; | error.className = "my-error active"; |
| event.preventDefault(); | } else { |
| | error.innerHTML=`'${m}' est valide !`; |
| | error.className = "my-error valid active"; |
| } | } |
| }); | }); |
| </html> | </html> |
| |
| | ==== Articles ==== |
| | |
| | * [[https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145|HTML5 Form validation sample]] |
jcheron