Jquery ajax表单提交中的验证

Question

我正在尝试验证用户是否输入唯一的手机号码和电子邮件 ID。 它正在检查并显示结果手机/电子邮件是否存在，但如果它存在，表格仍在提交。由于我是 jQuery 验证的新手，所以我无法弄清楚我应该如何正确地进行验证，也无法找到一个完美的教程来以正确的方式进行验证。

这是我的代码，我知道会有很多错误，我为这些小错误道歉。

在我的表单上，我提供了 On blur 功能来检查手机号码和电子邮件

通过这两个函数，我正在检查数据库是否存在

function check_availability() {
  //get the mobile number  
  var main = $('#main').val();

  //use ajax to run the check  
  $.post("tutor/check_mobile", {
      main: main
    },
    function(result) {
      //if the result is 1  
      if (result == 1) {
        //show that the username is available 
        $('#mobile_availability_result').html(' ');
      } else {
        //show that the username is NOT available  
        $('#mobile_availability_result').html('Mobile Number already registered ');
      }
    });

}

function email_availability() {
    //get the email

    var main = $('#email_tuitor').val();
    //$email = urldecode("[email]") 


    //use ajax to run the check  
    $.post("<?php echo base_url(); ?>tutor/check_email", {
        main: main
      },
      function(result) {
        //if the result is 1  
        if (result == 1) {
          //show that the username is available 
          $('#email_availability_result').html(' ');
        } else {
          //show that the username is NOT available  
          $('#email_availability_result').html('Email already registered ');
        }
      });
  }

这是 jquery ajax 表单提交，是否可以对 blur 进行每次验证？

$(document).ready(function() {
  $('.error').hide();
  $("#next_tutor").click(function() {
    $('.error').hide();
    var main = $("#main").val();
    if (main == "") {
      $("label#main_error").show();
      $("input#main").focus();
      return false;
    }
    var name = $("#name").val();
    if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
    var email_tuitor = $("#email_tuitor").val();
    if (email_tuitor == "") {
      $("label#email_tuitor_error").show();
      $("input#email_tuitor").focus();
      return false;
    }
    var password_tuitor = $("#password_tuitor").val();
    if (password_tuitor == "") {
      $("label#password_tuitor_error").show();
      $("input#password_tuitor").focus();
      return false;
    }

    var tutor = $("#tutor").val();
    //  Returns successful data submission message when the entered information is stored in database.
    var dataString = 'main=' + main + '&name=' + name + '&email_tuitor=' + email_tuitor + '&password_tuitor=' + password_tuitor + '&tutor=' + tutor;
    // AJAX Code To Submit Form.
    //alert(dataString);
    //die;
    $.ajax({
      type: "POST",
      url: "<?php echo base_url(); ?>tutor/tutor_sub_ses",
      data: dataString,
      cache: false,
      success: function(result) {
        //alert(result);
        $("#abc").hide();
        $("#tutorreg2").slideToggle("slow").show();
      }
    });
    return false;
  });
});

<form class="form-horizontal" action="#">
  <div class="form-group">
    <div class="col-sm-8 text-center">
      <h2 class="text-warning">Tutor Registration</h2>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" value="tutor" style="display:none" id="tutor">
      <input type="text" class="form-control" id="name" placeholder="Name">
      <label id="name_error" class="error" for="name"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" class="form-control phone" id="main" placeholder="Mobile Number *This will be the key to your account*" onBlur="check_availability()">
      <span id="mobile_availability_result"></span>
      <label id="main_error" class="error" for="main"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" class="form-control" id="email_tuitor" placeholder="Email" onBlur="email_availability()">
      <span id="email_availability_result"></span>
      <label id="email_tuitor_error" class="error" for="email_tuitor"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="password" class="form-control" id="password_tuitor" placeholder="Password">
      <label id="password_tuitor_error" class="error" for="password_tuitor"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8 text-right">
      <button type="submit" class="btn btn-warning" id="next_tutor">Next</button>
    </div>
  </div>
</form>

Answer 1

快速的方法是使用全局开关来启用发送表单。我会这样：

1. 使用默认值创建全局变量

   var mobileApproved = false, emailApproved = false;
   

2. 如果点击处理程序中的值为 false，则检查状态并阻止发送

   $(document).ready(function() {
   
       ...
   
   
       $("#next_tutor").click(function() {
   
           if (!mobileApproved || !emailApproved) {
               return false;
           }
           ...
       })
   
       ...
   
   })
   

3. 在您的检查功能中管理每个 ajax 响应后的批准状态

   ...
   $.post("tutor/check_mobile", {
       main: main
   },
   function(result) {
       //if the result is 1  
       if (result == 1) {
           //show that the username is available 
           $('#mobile_availability_result').html(' ');
           mobileApproved = true;
       } else {
           //show that the username is NOT available  
           $('#mobile_availability_result').html('Mobile Number already registered ');
           mobileApproved = false;
       }
   });
   
   ...
   $.post("<?php echo base_url(); ?>tutor/check_email", {
       main: main
   },
   function(result) {
       //if the result is 1  
       if (result == 1) {
           //show that the username is available 
           $('#email_availability_result').html(' ');
           emailApproved = true;
       } else {
           //show that the username is NOT available  
           $('#email_availability_result').html('Email already registered ');
           emailApproved = false;
       }
   });
   

Answer 2

为了停止来自submission 的表单。你可以保留一个标志，比如说formvalid。

最初保持formValid 为假。根据您的模糊功能，如果电子邮件和移动设备可用，则将其设为 true，否则将其设为 false。在您的表单提交中，放置一个 if 条件来检查 formvalid 是否为真。如果为 true，则处理表单提交，否则停止并抛出错误。