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 19:25] – [Validation Javascript] jcheronweb:html:formulaires:validation [2023/04/21 23:44] (Version actuelle) – jcheron
Ligne 181: Ligne 181:
 ==== 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 ====
 +=== Formulaire HTML ===
  
-==== Exemple ==== 
 <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>
  
 <sxh html> <sxh html>
 <form novalidate> <form novalidate>
-  <label for="mail-v">Pourriez-vous nous fournir une adresse mail ?</label> +  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> 
-  <input type="email" id="mail-v" name="mailv">+  <input type="email" id="mail" name="mail">
   <button>Envoyer</button>   <button>Envoyer</button>
-  <div class="my-error"></div>+  <div class="error"></div>
 </form> </form>
 </sxh> </sxh>
 +=== Feuille de style CSS ===
  
 <sxh 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> </sxh>
 +
 +=== Validation Javascript ===
  
 <sxh 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> </sxh>
 <html> <html>
Ligne 233: 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 264: 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.1680974730.txt.gz
  • Dernière modification : il y a 3 ans
  • de jcheron