在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表单提交是否可以对模糊进行每次验证？

$(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保持为false。 根据您的模糊功能，如果电子邮件和移动设备可用，请将其设为真，否则请将其保留为假。 在表单提交中，如果formvalid为true，则formvalid if条件进行检查。 如果为true，则使用表单提交处理，否则停止并抛出错误。