WiP Form validation

app/views/layout.ejs

@@ -16,6 +16,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
 
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="/assets/main.css">
   <link rel="stylesheet" href="/assets/segment.css">

app/views/publishEnd.ejs

@@ -4,12 +4,13 @@
     Unesite kontakt email i objavite oglas.
 
 <br>
-<div class="row center-align input-field col s3 m4 l5">
+<div class="row center-align input-field col s3 m4 l5 form-group">
   <input
           id="email"
           name="email"
           type="email"
   >
+  <div class="messages"></div>
   <label for="email">Email</label>
 </div>
 </div>

app/views/publishRealEstate.ejs

@@ -1,5 +1,5 @@
 <br>
-<form id="publishForm" method="POST">
+<form id="publishForm" method="POST" novalidate>
   <div class="row">
     <div class="col s12">
       <ul class="tabs">
@@ -28,13 +28,83 @@
 </form>
 
 <script>
+
   $(document).ready(function(){
     $('.tabs').tabs();
 
+    const validateEmail = $email => {
+          const regexEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+          return regexEmail.test($email);
+    }
+
+    const form = document.querySelector("#publishForm");
+
+    function showErrors(form, errors) {
+    // We loop through all the inputs and show the errors for that input
+    //_.each(form.querySelectorAll("input[name], select[name]"), function(input) {
+      // Since the errors can be null if no errors were found we need to handle
+      // that
+      showErrorsForInput(input, errors && errors[input.name]);
+   // });
+  }
+
+  // Shows the errors for a specific input
+  function showErrorsForInput(input, errors) {
+    // This is the root of the input
+    var formGroup = closestParent(input.parentNode, "form-group"),
+      // Find where the error messages will be insert into
+      messages = formGroup.querySelector(".messages");
+    // First we remove any old messages and resets the classes
+    resetFormGroup(formGroup);
+    // If we have errors
+    if (errors) {
+      // we first mark the group has having errors
+      formGroup.classList.add("has-error");
+      // then we append all the errors
+      $.each(errors, function(error) {
+        addError(messages, errors[error]);
+      });
+    } else {
+      // otherwise we simply mark it as success
+      formGroup.classList.add("has-success");
+    }
+  }
+
+  // Recusively finds the closest parent that has the specified class
+  function closestParent(child, className) {
+    if (!child || child == document) {
+      return null;
+    }
+    if (child.classList.contains(className)) {
+      return child;
+    } else {
+      return closestParent(child.parentNode, className);
+    }
+  }
+
+  function resetFormGroup(formGroup) {
+    formGroup.classList.remove("has-error");
+    formGroup.classList.remove("has-success");
+    $.each(formGroup.querySelectorAll(".help-block.error"), function(el) {
+      el.parentNode.removeChild(el);
+    });
+  }
+
+  // Adds the specified error with the following markup
+  // <p class="help-block error">[message]</p>
+  function addError(messages, error) {
+    var block = document.createElement("p");
+    block.classList.add("help-block");
+    block.classList.add("error");
+    block.innerText = error;
+    messages.appendChild(block);
+  }
+
     $("#submit").click( function () {
       const mapBounds = map.getBounds();
       const currentLocation = marker.getPosition();
 
+
         $("#north").val(mapBounds.getNorthEast().lat());
         $("#south").val(mapBounds.getSouthWest().lat());
         $("#east").val(mapBounds.getNorthEast().lng());
@@ -47,8 +117,20 @@
           document.getElementById("autocompleteInput").value
         );
 
+       
+       const errors = validateEmail($("#email").val());
+       
+       if (errors) {
+          $("#publishForm").submit();
+        }
+        else {
+          const errorMsgs = ["Unesite validan email."];
+          const email = document.querySelector("#email");
 
-    $("#publishForm").submit();
+          showErrorsForInput( email, errorMsgs)
+
+
+        }
     });
   });