web:html:formulaires:validation

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

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:19] – [Validation Javascript] jcheronweb:html:formulaires:validation [2023/04/21 23:44] (Version actuelle) – jcheron
Ligne 175: Ligne 175:
 </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>
Ligne 203: Ligne 276:
 <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>
Ligne 216: Ligne 289:
 myform.addEventListener("submit", function (event) { myform.addEventListener("submit", function (event) {
   event.preventDefault();   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";
   } else {   } else {
Ligne 234: Ligne 307:
 </html> </html>
  
 +==== Articles ====
 +
 +  * [[https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145|HTML5 Form validation sample]]
  • web/html/formulaires/validation.1680970778.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron