| 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 19:30] – [Exemple] jcheron | web:html:formulaires:validation [2023/04/21 23:44] (Version actuelle) – jcheron |
|---|
| ==== Propriétés des éléments ==== | ==== Propriétés des éléments ==== |
| |
| ^Propriété ^Rôle ^ | ^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) | | ^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.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 | | ^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 | | ^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 | | ^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 | | ^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 | | ^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é | | ^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 | | ^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 | | ^willValidate | Renvoie **true** si l'élément est validé lors du submit | | |
| |
| ==== Méthodes ==== | ==== 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 ==== | ==== Exemple ==== |
| | === Formulaire HTML === |
| | |
| <wrap info>L'attribut **novalidate** du form désactive la validation HTML5 par défaut.</wrap> | <wrap info>L'attribut **novalidate** du form désactive la validation HTML5 par défaut.</wrap> |
| |
| </form> | </form> |
| </sxh> | </sxh> |
| | === Feuille de style CSS === |
| |
| <sxh css> | <sxh css> |
| } | } |
| </sxh> | </sxh> |
| | |
| | === Validation Javascript === |
| |
| <sxh javascript> | <sxh javascript> |
| <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> |
| </html> | </html> |
| |
| | ==== Articles ==== |
| | |
| | * [[https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145|HTML5 Form validation sample]] |
jcheron