| 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:41] – [Propriétés des éléments] 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 ^Pseudo-class si true ^Si false ^ | ^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é | | | |
| ==== Méthodes ==== | ==== Méthodes ==== |
| ^Méthode ^Rôle ^ | ^Méthode ^Rôle ^ |
| ^checkValidity() | Renvoie **true** si la valeur de l'élément n'a passe la validation | | ^checkValidity() | Renvoie **true** si la valeur de l'élément passe la validation | |
| ^setCustomValidity(message) | Défini un message de validation personnalisé | | ^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