Project Phase 1 (PART C) FORM VALIDATION

 CLIENT SIDE VALIDATION FORM

A FIELD CAN BE DECLARED required  TO INDICATE THAT IT HAS TO BE COMPULSORLY FILLED.

<input

            name="listing[title]"

            type="text"

            placeholder="Enter title"

            class="form-control"

            required

          />

HERE THE MESSAGE SHOWN DIFFERS WITH DIFFERENT BROWSER. TO IMPLEMENT A STANDARDIZED MESSAGE WHILE OPERATING ON DIFFERENT BROWSERS WE USE BOOTSTRAP.

WE DECLARE IT AS novalidate INORDER TO OVERCOME THE DEFAULT IMPLEMENTATION OF THE BROWSER.

WE SET class="needs validation" 

THE LOGIC IS COPIED FROM THE BOOTSTRAP WEBSITE TO A SCRIPT.JS FILE AND ITS PATH IS COPIED IN THE SCRIPT TAG.

SCRIPT.JS

(() => {

  "use strict";

  // Fetch all the forms we want to apply custom Bootstrap validation styles to

  const forms = document.querySelectorAll(".needs-validation");

  // Loop over them and prevent submission

  Array.from(forms).forEach((form) => {

    form.addEventListener(

      "submit",

      (event) => {

        if (!form.checkValidity()) {

          event.preventDefault();

          event.stopPropagation();

        }

        form.classList.add("was-validated");

      },

      false

    );

  });

})();

IN BOILERPLATE.EJS

ADD SCRIPT TAG

    <script src="/js/script.js"></script>

IN NEW.EJS

in the FORM ADD  novalidate AND class="needs-validation"

 <form

        method="POST"

        action="/listings"

        class="needs-validation"

        novalidate

      >