Jquery ajax 表单提交中的验证

Question

我正在尝试验证用户是否输入了唯一的手机号码和电子邮件 ID。它正在检查并显示结果 mobile/email 是否存在，但如果存在，表单仍在提交。由于我是 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

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

创建具有默认值的全局变量

var mobileApproved = false, emailApproved = false;

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

$(document).ready(function() {

    ...


    $("#next_tutor").click(function() {

        if (!mobileApproved || !emailApproved) {
            return false;
        }
        ...
    })

    ...

})

在您的检查功能中管理每个 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。根据您的模糊功能，如果电子邮件和移动设备可用，则将其设为真，否则将其设为假。在您的表单提交中，放置一个 if 条件来检查 formvalid 是否为真。如果为真，则处理表单提交，否则停止并抛出错误。

Jquery ajax 表单提交中的验证

Validation in Jquery ajax form submission

javascript

jquery

ajax

codeigniter

ajaxform