added form validation

nick-zanetti · Oct 11, 2020 · deae4d4 · deae4d4
1 parent f0a9558
commit deae4d4
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 60 deletions.
diff --git a/index.html b/index.html
@@ -148,20 +148,15 @@ <h3 class="contact-title">Contact Me</h3>
 <form action="POST" data-netlify="true" name="contact-form-wrapper" id="netlify-form">
   <div class="contact-form">
     <div class="field">
-      <input type="text" name="name" id="name" placeholder="Name" class="field-input" />
+      <input type="text" name="name" id="name" placeholder="Name" class="field-input" required />
       <br>
-      <small id="name-error" class="error-text">Please enter a name</small>
     </div> 
-
     <div class="field">
-      <input type="email" name="email" id="email" placeholder="Email" class="field-input"/>
+      <input type="email" name="email" id="email" placeholder="Email" class="field-input" required />
       <br>
-      <small id="email-error" class="error-text">Please enter a valid email</small> 
     </div>
-
     <div class="message-wrap">
-      <textarea name="message" id="message" placeholder="Message..." rows="7" class="message-field"></textarea>
-      <small id="message-error" class="error-text">Please enter a message</small>
+      <textarea name="message" id="message" placeholder="Message..." rows="7" class="message-field" required ></textarea>
     </div> 
     <div class="field">
       <div data-netlify-recaptcha="true"></div>

diff --git a/main.js b/main.js
@@ -45,44 +45,3 @@ document.body.addEventListener('keydown', (e) => {
   }
 })
 
-//FORM VALIDATION
-const form = document.getElementById("netlify-form")
-
-const userName = document.getElementById("name")
-const email = document.getElementById("email")
-const message = document.getElementById("message")
-
-const nameError = document.getElementById("name-error")
-const emailError = document.getElementById("email-error")
-const messageError = document.getElementById("message-error")
-
-form.addEventListener('submit', (e) => {
-  e.preventDefault();
-  checkInputs();
-})
-
-const checkInputs = () => {
-  const nameValue = userName.value.trim();
-  const emailValue = email.value.trim();
-  const messageValue = message.value.trim();
-
-  if (nameValue === '') {
-    nameError.style.visibility = "visible";
-  }
-
-  if (emailValue === '') {
-    emailError.style.visibility = "visible";
-  } else if (!isEmail(emailValue)) {
-    emailError.style.visibility = "visible";
-  }
-
-  if (messageValue === '') {
-    messageError.style.visibility = "visible";
-  }
-
-}
-
-const isEmail = (email) => {
-  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
-}
-
diff --git a/styles.css b/styles.css
@@ -361,17 +361,6 @@ a {
   color: #222830;
 }
 
-.field {
-  margin: 10px 10px;
-}
-
-.error-text {
-    color: #e74c3c;
-    visibility: hidden;
-    /* position: absolute; */
-    /* bottom: 0;
-    left: 0; */
-}
 
 /* MOBILE STUFF */