stop form submission in ajax if validation failed

Question

i want to stop form submission when validation failed, but it not happen . i call ajax method to send data . and i also add validation script . my validation script showing error but also forrm submitted. how can i resolve this?

my form with on submit

<div class="col-md-12 add-product-form-detail" onsubmit="return validation()" style="background-color:#e2e2e2;">
  <form action="#" method="POST" class="warehouseusers-form" style="width:fit-content;" id="warehouseForm">
      <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 54px;" align="center">User name:  </span> <input type="text" name="userid" class="userid"  id="login" ></h4>
      <span id="logonError" class="loginvalidate"></span>


       <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 54px;">Password:&nbsp</span> <input type="password" name="password" class="password" id="password" ></h4>
       <span id="pwdError" class="loginvalidate"></span>

       <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 23px;">Conform Password:</span> <input type="password" name="pwd" class="pwd"  id="confirm_password" ></h4>
       <span id="cpwdError" class="loginvalidate"></span>

        <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 70px;">Name:</span> <input type="text" name="name" class="name"  id="name" ></h4>
       <span id="warreidError" class="loginvalidate"></span>


        <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 49px;">warehouse :</span> <select class="warehouse_id"  id="warehouseList" name="warehouse_id" ></select> 
         </h4>
         <span id="wareError" class="loginvalidate"></span>
           <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 67px;">Phone:</span> <input type="text" name="phone" class="phone" id="phone"></h4>
           <span id="phoneError" class="loginvalidate"></span>


       <h4><span class="name_title g-font-weight-300 g-font-size-28 g-color-black g-mb-30" style="padding:0px 70px;">Email:</span> <input type="email" name="email" class="email" id="email" ></h4>
        <span id="emailError" class="loginvalidate"></span>


       <input type="submit" name="submit" value="submit" class="btn btn-default product_submit_button waresubmitButton">

  </form>

form validation script

function validation(){


    var login = document.getElementById('login').value;
     var pass = document.getElementById('password').value;
      var confpass = document.getElementById('confirm_password').value;
      var ware = document.getElementById('warehouseList').value;
       document.getElementById('logonError').innerHTML = "";
       document.getElementById('pwdError').innerHTML="";
       document.getElementById('cpwdError').innerHTML ="";
       document.getElementById('wareError').innerHTML ="";



    if(login == ""){
        document.getElementById('logonError').innerHTML = " **please fill the user name field";
        return false;
    }

    if((login.length <=2) || (login.length > 20)) {

         document.getElementById('logonError').innerHTML = " **length must be between 2 and 20";
        return false;

          }


          if(!isNaN(login)){
               document.getElementById('logonError').innerHTML = " **fill only characters";
        return false;
          }





      if(pass == ""){
        document.getElementById('pwdError').innerHTML = " **please fill password";
        return false;
    }

     if((pass.length <=7)) {

         document.getElementById('pwdError').innerHTML = " **minimum password lenght is 7";
        return false;

          }


          if(pass!=confpass){
               document.getElementById('pwdError').innerHTML = " **password not matching";
        return false;
          }



      if(confpass == ""){
        document.getElementById('cpwdError').innerHTML = " **please fill conform password";
        return false;
    }

       if((confpass.length <=2) || (confpass.length > 20)) {

         document.getElementById('cpwdError').innerHTML = " **length must be between 2 and 20";
        return false;

          }
    alert("warehouseList"+warehouseList);

      if(warehouseList == ""){
        document.getElementById('wareError').innerHTML = " **please select warehouse ";
        return false;
    }



          if(isNaN(ware)){
                 document.getElementById('wareError').innerHTML = " **fill only digit";
        return false;
          }
}

and my ajax code where i send form data to api

$(function () {

  $('form').on('submit', function (e) {

    e.preventDefault();

    if(!validation){
        alert("wrong")
    }

    var data={
        user:$(".userid").val(),
        password:$(".password").val(),
        warehousename:$(".name").val(),
        warehouseid:$('.warehouse_id option:selected').val(),
        phone:$(".phone").val(),
        email:$(".email").val()
    };

    console.log(data);


    $.ajax({
      type: 'POST',
      url: 'http://makeindiadigital.in/techlab/warehouse/public/add_warehouse_user',
      data: $('form').serialize(),
      success: function () {
        alert('form was submitted');
        $(".userid").val(" "),
        $(".password").val(" "),
        $(".warehouse_id").val(" "),
        $('.name option:selected').text(" "),
        $(".phone").val(" "),
         $(".email").val(" ")
      }
    });

  });

});

add `return;` after alert. or from the place you want to stop the code to run further. — Kaushik, Jun 07 '19 at 11:13
Possible duplicate of [Using JQuery - preventing form from submitting](https://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting) — remix23, Jun 07 '19 at 11:18
You alert "wrong" instead of preventing the $.ajax() call when validate fails. Your logic to submit the form should be something like:`if (validation){ $.ajax(....); } else { alert(....)}` or the `return` mentioned above. Concerning the error, which error do you get? :) — Shilly, Jun 07 '19 at 11:20

score 1 · Answer 1 · answered Jun 07 '19 at 11:36

function validation(){


    var login = document.getElementById('login').value; 
    var pass = document.getElementById('password').value;
    var confpass = document.getElementById('confirm_password').value;
    var ware = document.getElementById('warehouseList').value;
    document.getElementById('logonError').innerHTML = "";
    document.getElementById('pwdError').innerHTML="";
    document.getElementById('cpwdError').innerHTML ="";
    document.getElementById('wareError').innerHTML ="";



    if(login == "")
    {
        document.getElementById('logonError').innerHTML = " **please fill the user name field";
        return false;
    }

    if((login.length <=2) || (login.length > 20)) 
    {
         document.getElementById('logonError').innerHTML = " **length must be between 2 and 20";
        return false;

    }
    if(!isNaN(login))
    {
        document.getElementById('logonError').innerHTML = " **fill only characters";
        return false;
    }

    if(pass == "")
    {
        document.getElementById('pwdError').innerHTML = " **please fill password";
        return false;
    }

    if((pass.length <=7))
    {
        document.getElementById('pwdError').innerHTML = " **minimum password lenght is 7";
        return false;
    }

    if(pass!=confpass){
     document.getElementById('pwdError').innerHTML = " **password not matching";
     return false;
    }

    if(confpass == ""){
     document.getElementById('cpwdError').innerHTML = " **please fill conform password";
     return false;
    }

    if((confpass.length <=2) || (confpass.length > 20)) {
     document.getElementById('cpwdError').innerHTML = " **length must be between 2 and 20";
     return false;
    }

    if(warehouseList == ""){
    document.getElementById('wareError').innerHTML = " **please select warehouse ";
    return false;
    }
    if(isNaN(ware)){
             document.getElementById('wareError').innerHTML = " **fill only digit";
    return false;
      }

     else
     {
         $.ajax({
            type: 'POST',
            url: 'http://makeindiadigital.in/techlab/warehouse/public/add_warehouse_user',
            data: $('form').serialize(),
            success: function () {
                alert('form was submitted');
                $(".userid").val(" "),
                $(".password").val(" "),
                $(".warehouse_id").val(" "),
                $('.name option:selected').text(" "),
                $(".phone").val(" "),
                $(".email").val(" ")
            }
            });



    } 
}

Please try way it is written you don't need to create different function for ajax and validation, you can just write it in one function and call that function on click of button,
    So what will happen it will validate your form as well as if every placeholder is filed then it will call the Jquery ajax.

    Above code is not complied or run on any platform it is just for your reference,
    So try the way it has written.

    Hope this Help...!!

score 0 · Accepted Answer · answered Jun 07 '19 at 11:36

Make your validation method return 'true' if no errors are found and rearrange your form submit method like so:

function validation() {
    // your code

    return true;
}

$(function () {    
    $('form').on('submit', function (e) {    
        e.preventDefault();

        if (validation()) {
            $.ajax({
                type: 'POST',
                url: 'http://makeindiadigital.in/techlab/warehouse/public/add_warehouse_user',
                data: $('form').serialize(),
                success: function () {
                    alert('form was submitted');
                    $(".userid").val(" "),
                        $(".password").val(" "),
                        $(".warehouse_id").val(" "),
                        $('.name option:selected').text(" "),
                        $(".phone").val(" "),
                        $(".email").val(" ")
                }
            });
        } else {
            alert("wrong");
        }
    });
});

stop form submission in ajax if validation failed

2 Answers2