Fix add confirmation text while submit validaiton is ok OpenClassroom…

…s-Student-Center#4
Wewill · Sep 4, 2024 · ce463f9 · ce463f9
1 parent 29b324b
commit ce463f9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -58,7 +58,6 @@ <h1 class="hero-headline">
           <div class="modal-body">
             <form
               id="form"
-              name="reserve"
               action="index.html"
               method="get"
             >
@@ -204,9 +203,10 @@ <h1 class="hero-headline">
               <input
                 class="button btn-submit"
                 type="submit"
-                id="submit"
+                id="btn-submit"
                 value="C'est parti"
               />
+              <p class="success" id="submit-success">Merci ! Votre réservation a été reçue.</p>
             </form>
           </div>
         </div>

diff --git a/starterOnly/modal.css b/starterOnly/modal.css
@@ -226,6 +226,10 @@ input {
 .formData[data-error-visible="true"] .text-control {
   border: 2px solid #e54858;
 }
+.success {
+  font-size: 0.4em;
+  color: #1ab653; 
+}
 /* 
 input[data-error]::after {
     content: attr(data-error);

diff --git a/starterOnly/modal.js b/starterOnly/modal.js
@@ -20,14 +20,19 @@ const formData = document.querySelectorAll(".formData");
 
 // Form 
 const form = document.getElementById('form');
+let data = new FormData(form);
+// Reset all fields
+// form.reset();
+
+document.getElementById("submit-success").style.display = "none";
 
 // Validation functions
 function inputValidation(field) {
   return (document.getElementById(field).value !== null) ? true : false;
 }
 
 function textValidation(field) {
- 	return (document.getElementById(field).value !== null && document.getElementById(field).value.length > document.getElementById(field).getAttribute("minlength")) ? true : false;
+ 	return (document.getElementById(field).value !== null && document.getElementById(field).value.length >= document.getElementById(field).getAttribute("minlength")) ? true : false;
 }
 
  function emailValidation(field) {
@@ -36,7 +41,8 @@ function textValidation(field) {
  }
 
  function dateValidation(field) {
-  let regex = /^(0?[1-9]|[12][0-9]|3[01])[\/](0?[1-9]|1[012])[\/\-]\d{4}$/;
+  console.log(document.getElementById(field).value);
+  let regex = /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/;
   return regex.test(document.getElementById(field).value);
 }
 
@@ -58,7 +64,7 @@ function textValidation(field) {
 
  // Submit function 
  document
- 	.getElementById("submit")
+ 	.getElementById("btn-submit")
  	.addEventListener("click", function formValidation(event) {
  		event.preventDefault();
  		let isValid = true;
@@ -114,11 +120,13 @@ function textValidation(field) {
 
     // Then submit 
  		if (isValid) {
-      console.log("Form is valid > submit")
- 			form.submit();
- 		} else 
+      console.log("Form is valid > submit");
+ 			//form.submit();
+      document.getElementById("submit-success").style.display = "block";
+ 		} else {
       console.log("Form is not valid > show errors")
-
+      document.getElementById("submit-success").style.display = "none";
+    }
  	});