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


  
      User name:   
      


       Password:  
       

       Conform Password: 
       

        Name: 
       


        warehouse :  
         
         
           Phone: 
           


       Email:

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

  });

});

iamdlm · Accepted Answer

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

Answers (2)

Related Questions