如果验证失败，则停止在Ajax中提交表单

Question

我想在验证失败时停止表单提交，但是没有发生。我调用ajax方法发送数据。而且我还添加了验证脚本。我的验证脚本显示错误，但也提交了形式。我该如何解决？

我的表单上有提交

<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>

表单验证脚本

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

和我的Ajax代码，我将表单数据发送到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(" ")
      }
    });

  });

});

Answer 1

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...!!

Answer 2

如果未发现任何错误，则使您的验证方法返回“ true”，并像这样重新排列表单提交方法：

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