Merge pull request #17 from hsztan/form-validation

Email validation and suggestion
hsztan · Mar 2, 2022 · d471654 · d471654
2 parents 60e8ae1 + eedc088
commit d471654
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -232,6 +232,7 @@ <h2 class="intro">
             maxlength="500"
             required
           ></textarea>
+          <small id="warnings"></small>
           <button class="form-btn btn btn-main" type="submit">
             Get in touch
           </button>

diff --git a/main.css b/main.css
@@ -838,6 +838,13 @@ nav ul .email-icon {
   margin-top: 25px;
 }
 
+#warnings {
+  color: #ff6b00;
+  padding-top: 5px;
+  padding-left: 16px;
+  font-family: 'Crete Round', Arial, Helvetica, sans-serif;
+}
+
 .contact textarea {
   padding: 12px;
   margin-top: 24px;

diff --git a/main.js b/main.js
@@ -193,4 +193,50 @@ const displayModal = (event) => {
 
 workButtons.forEach((btn) => {
   btn.addEventListener('click', displayModal);
+});
+
+// Validate email input in form
+
+const validateEmail = (inputElement) => {
+  const username = inputElement.value.split('@')[0];
+  const emailRegex = /^[a-z_.\-|1-9]+$/;
+  return emailRegex.test(username);
+};
+
+const showMessage = (message, element, email) => {
+  const correctEmail = email.toLowerCase();
+  message += ` Did you mean this? ${correctEmail}`;
+  element.innerText = message;
+};
+
+// Disable hidden required fields in order to submit
+const toggleDisableFields = () => {
+  const firstName = document.querySelector('#first-name');
+  const lastName = document.querySelector('#last-name');
+  const fullName = document.querySelector('#name');
+  if (window.innerWidth <= 992) {
+    firstName.setAttribute('disabled', true);
+    lastName.setAttribute('disabled', true);
+    fullName.removeAttribute('disabled');
+  } else {
+    firstName.removeAttribute('disabled');
+    lastName.removeAttribute('disabled');
+    fullName.setAttribute('disabled', true);
+  }
+};
+
+// In order to disable the hidden fields
+window.addEventListener('resize', toggleDisableFields);
+window.addEventListener('load', toggleDisableFields);
+
+document.querySelector('.contact-form').addEventListener('submit', (e) => {
+  const emailInput = document.querySelector('#email');
+  const isValid = validateEmail(emailInput);
+  if (!isValid) {
+    e.preventDefault();
+    const msgErrorOutContainer = document.querySelector('#warnings');
+    showMessage('Please enter your email in lower-case letters.', msgErrorOutContainer, emailInput.value);
+    return false;
+  }
+  return true;
 });