CODEWITHSUNDEEP
node.jsmongodbexpress
Anugrah
Anugrah

Reputation: 39

client side script validation not working

ejs code to add form values to data base, when clicking submit button get redirected to admin/add.

<form name="addProduct" action="admin/add" method="post" onsubmit="return IsFormValid()">    
  <div class="row">
     <div id="msg-error">
        <div class="alert with-close alert-danger">
            <span class="badge badge-pill badge-danger">Error!!</span>
            <span id="error-text"></span>
         </div>
      </div>          
      <div class="col-12 mb-3">
         <label for="form-name">Product Name <span>*</span></label>
         <input type="text" class="form-control" id="form-name" name="name" value="">
      </div>
      <button type="submit" class="btn btn-primary btn-services rounded-btn">Add Product</button>
   </div>
</form>

Script is

<script>
        document.getElementById("msg-error").style.display = "none";

        function IsFormValid(){

            document.getElementById("msg-error").style.display = "none";
            var ProductName=document.getElementById("form-name").value;                 
            var RegName = /^[A-Za-z ]+$/;

            if( ProducName == ""){
                document.getElementById("msg-error").style.display = "block";
                document.getElementById("error-text").innerHTML="Enter Product Name";
                return false;                

            }else{
                alert ("Form Submitted Successfully!");
                return true;
            } 
        }

    </script>

Not working it simply get redirected to form action

Upvotes: 0

Views: 29

Answers (1)

Edwin Babu
Edwin Babu

Reputation: 719

Form: add id to the form

<form id="addProductForm" name="addProduct" action="admin/add" method="post">    
  <div class="row">
     <div id="msg-error">
        <div class="alert with-close alert-danger">
            <span class="badge badge-pill badge-danger">Error!!</span>
            <span id="error-text"></span>
         </div>
      </div>          
      <div class="col-12 mb-3">
         <label for="form-name">Product Name <span>*</span></label>
         <input type="text" class="form-control" id="form-name" name="name" value="">
      </div>
      <button type="submit" class="btn btn-primary btn-services rounded-btn">Add Product</button>
   </div>
</form>

Script: add event listener to the script

<script>
        document.getElementById("msg-error").style.display = "none";

        document.querySelector("#addProductForm").addEventListener('submit',(event)=>{
            document.getElementById("msg-error").style.display = "none";
            var ProductName=document.getElementById("form-name").value;                 
            var RegName = /^[A-Za-z ]+$/;

            if( ProducName == ""){
                document.getElementById("msg-error").style.display = "block";
                document.getElementById("error-text").innerHTML="Enter Product Name";
                //return false;  
                event.preventDefault();

            }else{
                alert ("Form Submitted Successfully!");
                //return true;
            } 
        }

    </script>

Use event.preventDefault() to stop the basic execution of the form

For more details check the validation i have done in my project ref code

Upvotes: 1

Related Questions