feat(ARIA): Add aria-invlid with CSS

GrimonprezAlexis · Feb 22, 2021 · 793cfce · 793cfce
1 parent 92d0998
commit 793cfce
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/starterOnly/modal.css b/starterOnly/modal.css
@@ -535,8 +535,15 @@ footer {
 }
 
 .formConfirmation {
-    padding: 15px 8%;
+    padding: 3rem 8%;
     margin: 15px auto;
     display: none;
 }
 
+input[aria-invalid='true'] {
+  border: 2px solid #fe142f;
+}
+
+input[aria-invalid='false'] {
+  border: 3px solid green;
+}
diff --git a/starterOnly/modal.js b/starterOnly/modal.js
@@ -42,37 +42,51 @@ function checkCondition(condition){
 }
 
 // Send specific error message rather than elementId provided
-function getErrorMessage(elementId, message){
+// Add aria invalid for use CSS
+function getErrorMessage(elementId, message, inputAssociate){
   if(elementId && message) {
     document.getElementById(elementId).style.display = "block";
     document.getElementById(elementId).innerText = message;
+    if(inputAssociate) inputAssociate.setAttribute("aria-invalid", "true");
   }
   else throw new Error('Missing parameter for handler error message');
 }
 
 //2nd submit, hide a valid field previous invlid
-function hideErrorMessage(elementId) {
+// Swich aria invalid to false for use CSS
+function hideErrorMessage(elementId, inputAssociate) {
   if(elementId) document.getElementById(elementId).style.display = "none";
+  if(inputAssociate) inputAssociate.setAttribute("aria-invalid", "false");
 }
 
 //Check after submit form conditon, and call function who show specific message or a valid field
 function validate(form) { 
     let firstNameValid = checkCondition(form["first"].value) && checkCondition(form["first"].value.length >= 2);
-    firstNameValid ? hideErrorMessage('error-firstName') : getErrorMessage('error-firstName', "Veuillez entrer 2 caractères ou plus pour le champ du prénom.");
+    firstNameValid ? 
+      hideErrorMessage('error-firstName', form["first"]) : 
+      getErrorMessage('error-firstName', "Veuillez entrer 2 caractères ou plus pour le champ du prénom.", form["first"]);
 
     let lastNameValid = checkCondition(form["last"].value) && checkCondition(form["last"].value.length >= 2);
-    lastNameValid ?  hideErrorMessage('error-lastName') : getErrorMessage('error-lastName', "Veuillez entrer 2 caractères ou plus pour le champ du nom."); 
+    lastNameValid ?  
+      hideErrorMessage('error-lastName', form["last"]) : 
+      getErrorMessage('error-lastName', "Veuillez entrer 2 caractères ou plus pour le champ du nom.", form["last"]); 
 
     //https://regex101.com/
     let emailValid = checkCondition(form["email"].value) && checkCondition(/[A-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/.test(form["email"].value));
-    emailValid ? hideErrorMessage('error-email') : getErrorMessage('error-email', "Veuillez entrer une addresse mail valide.");
+    emailValid ? 
+      hideErrorMessage('error-email', form["email"]) : 
+      getErrorMessage('error-email', "Veuillez entrer une addresse mail valide.", form["email"]);
 
     let birthdateValid = checkCondition(form["birthdate"].value) && checkCondition(/^\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])$/.test(form["birthdate"].value));
-    birthdateValid ? hideErrorMessage('error-birthdate') : getErrorMessage('error-birthdate', "Veuillez entrer une date de naissance.");
+    birthdateValid ? 
+      hideErrorMessage('error-birthdate', form["birthdate"]) : 
+      getErrorMessage('error-birthdate', "Veuillez entrer une date de naissance.", form["birthdate"]);
 
     //isNaN return false if is a number, true if not
     let qteTournamentValid = checkCondition(form["quantity"].value) && checkCondition(/^[0-9]+$/.test(form["quantity"].value));
-    qteTournamentValid ? hideErrorMessage('error-tournament') : getErrorMessage('error-tournament', "Veuillez entrer une valeur numérique.");
+    qteTournamentValid ? 
+      hideErrorMessage('error-tournament', form["quantity"]) : 
+      getErrorMessage('error-tournament', "Veuillez entrer une valeur numérique.", form["quantity"]);
 
     let locationValid = checkCondition(form.location.value);
     locationValid ?  hideErrorMessage('error-location') : getErrorMessage('error-location', "Veuillez sélectionner une ville.");