прекратить отправку формы в ajax, если проверка не удалась - PullRequest
Новая
       1

прекратить отправку формы в ajax, если проверка не удалась

1 голос
/ 07 июня 2019

Я хочу остановить отправку формы, если проверка не удалась, но этого не произошло.я вызываю метод ajax для отправки данных.и я также добавляю скрипт проверки.Мой скрипт проверки показывает ошибку, но также отправил forrm.как я могу решить эту проблему?

моя форма при отправке 

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

  });

});

Ответы [ 2 ]

1 голос
/ 07 июня 2019 
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...!!
0 голосов
/ 07 июня 2019

Сделайте так, чтобы ваш метод проверки возвращал '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");
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...