WiP Form validation

app/common/publishEnums.js

@@ -62,7 +62,10 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.OFFICE,
       AD_CATEGORY.LAND,
       AD_CATEGORY.GARAGE
-    ]
+    ],
+    constraint: {
+      numericality: true
+    }
   },
   {
     dbField: "area",
@@ -75,12 +78,19 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.OFFICE,
       AD_CATEGORY.LAND,
       AD_CATEGORY.GARAGE
-    ]
+    ],
+    constraint: {
+      numericality: true,
+      presence: true
+    }
   },
   {
     dbField: "gardenSize",
     title: "Površina okućnice (m\xB2)",
-    categoriesToShow: [AD_CATEGORY.HOUSE, AD_CATEGORY.COTTAGE]
+    categoriesToShow: [AD_CATEGORY.HOUSE, AD_CATEGORY.COTTAGE],
+    constraint: {
+      numericality: true
+    }
   },
   {
     dbField: "numberOfRooms",
@@ -91,7 +101,13 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.APARTMENT,
       AD_CATEGORY.COTTAGE,
       AD_CATEGORY.OFFICE
-    ]
+    ],
+    constraint: {
+      numericality: {
+        onlyInteger: true,
+        greaterThanOrEqualTo: 0
+      }
+    }
   },
   {
     dbField: "numberOfFloors",
@@ -101,7 +117,12 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.HOUSE,
       AD_CATEGORY.APARTMENT,
       AD_CATEGORY.COTTAGE
-    ]
+    ],
+    constraint: {
+      numericality: {
+        onlyInteger: true
+      }
+    }
   },
   {
     dbField: "floor",
@@ -110,7 +131,12 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.FLAT,
       AD_CATEGORY.APARTMENT,
       AD_CATEGORY.OFFICE
-    ]
+    ],
+    constraint: {
+      numericality: {
+        onlyInteger: true
+      }
+    }
   },
   {
     dbField: "title",
@@ -123,7 +149,10 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.OFFICE,
       AD_CATEGORY.LAND,
       AD_CATEGORY.GARAGE
-    ]
+    ],
+    constraint: {
+      presence: true
+    }
   },
   {
     dbField: "shortDescription",
@@ -136,7 +165,8 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.OFFICE,
       AD_CATEGORY.LAND,
       AD_CATEGORY.GARAGE
-    ]
+    ],
+    constraint: {}
   },
   {
     dbField: "streetName",
@@ -149,7 +179,8 @@ const BASIC_INPUT_PUBLISH = [
       AD_CATEGORY.OFFICE,
       AD_CATEGORY.LAND,
       AD_CATEGORY.GARAGE
-    ]
+    ],
+    constraint: {}
   }
 ];
 

app/controllers/publishRealEstate.js

@@ -2,6 +2,8 @@ const { currentRealEstate } = require("../helpers/url");
 const { createRealEstate } = require("../helpers/db/realEstate");
 const { getKiviOriginalById } = require("../helpers/db/kiviOriginal");
 
+const validate = require("validate.js");
+
 const {
   AD_CATEGORY,
   FURNISHING_TYPE,
@@ -162,7 +164,8 @@ const getPublishInputs = async (req, res) => {
     basicInputInputs,
     basicInputValues,
     additionalInputInputs,
-    additionalInputValues
+    additionalInputValues,
+    validate: validate
   });
 };
 

app/public/main.css

@@ -158,3 +158,7 @@ h3 {
 .estates-link {
   color: rgba(0, 0, 0, 0.87);
 }
+
+.error {
+  color: #cc0033;
+}

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)
+
+
+        }
     });
   });