old-web/app/views/publishRealEstate.ejs

<br>
<form id="publishForm" method="POST" novalidate>
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
        <li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>
        <li class="tab col s3"><a href="#publishLocation">Lokacija</a></li>
        <li class="tab col s3"><a href="#publishEnd">Kraj</a></li>

    </ul>
    </div>
    <div id="publishBasicData" class="col s12">
      <%- include("./publishBasicData.ejs") %>
    </div>
    <div id="publishAdditionalData" class="col s12">
      <%- include("./publishAdditionalData.ejs") %>
    </div>
    <div id="publishLocation" class="col s12">
     <%- include("./publishLocation.ejs") %>
    </div>
    <div id="publishEnd" class="col s12">
     <%- include("./publishEnd.ejs") %>
    </div>
  </div>

  
</form>

<script>

  $(document).ready(function(){
    $('.tabs').tabs();

    //Helper validation functions
    const isValidEmail = $email => {
      const simpleEmailRegex = /^(([^<>()\[\]\\.,;:\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,}))$/;
      return $email && $email.length < 250 && simpleEmailRegex.test($email);
      };

    const isPresent = $input => {
      return $input && $input!=="" && $input != null;
      };

    const isNumber = $input => {
      const simpleNumberRegex = /([0-9]+[.|,][0-9])|([0-9][.|,][0-9]+)|([0-9]+)/;
      return $input && $input.length <250 && simpleNumberRegex.test($input) && !isNaN($input);
      };

    const isInteger = $input => {
      const simpleIntegerRegex = /^([+-]?[1-9]\d*|0)$/;
      return $input && $input.length <250 && simpleIntegerRegex.test($input);
      };

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

  const validate = (input) => {

    let valid=true;
    let errorMsg =[];
    let constraint = input.constraint[0];

    switch (constraint) {
      case "required":
      valid = isPresent ($(`#${input.dbField}`).val());
      errorMsg = ["Ovo je obavezno polje."];
      break;
      case "numerical":
      valid = isNumber ($(`#${input.dbField}`).val());
      errorMsg = ["Unesite brojcanu vrijednost."];
      break;
      case "integer":
      valid = isInteger ($(`#${input.dbField}`).val());
      errorMsg = ["Unesite cijeli broj."];
      break;
      default :
      valid = true;
     }
    if (!valid) {
    const inputField = document.querySelector(`#${input.dbField}`);
    showErrorsForInput( inputField, errorMsg);
    return false;
    } else {
    return true;
    }

}

    $("#submit").click( function () {

      if (marker) {
        const currentLocation = marker.getPosition();

        $("#lat").val(currentLocation.lat());

        $("#lng").val(currentLocation.lng());

        $("#locationInput").val(
          document.getElementById("autocompleteInput").value
          );
      } else {
        $("#lat").val(0);

        $("#lng").val(0);
      }
      

       //Tag for checking of error presence 
       let hasErrors = false;
      //Check if email is valid
       const validEmail = isValidEmail($("#email").val());
       //Show messeges for invalid email is present
      if (!validEmail) {
        const errorMsgs = ["Unesite validan email."];
        const email = document.querySelector("#email");
        showErrorsForInput( email, errorMsgs) 
        hasErrors = true;
      };
      //Check if other input fields are valid - vratiti se na ovo!!
      //const basicInputInputs= document.getElementById("basic-inputs").getElementsByTagName("input");
      
      //alert(JSON.stringify(""));
      /*
      $.each(basicInputInputs, function (input) {
        alert(input);
        validate (input);
      })
      for (const input of  basicInputInputs ) {
        alert(input.getAttribute(name));

        validate (input);
      } */

      if (!hasErrors) {
        $("#publishForm").submit();
      };
       
    });
  });
 
</script>