Question

输入字段验证工作正常，但无法提交ajax。我的jquery代码片段背后的错误在哪里？

$(document).ready(function() {

  $("#eValidate").live("click", function() {

    if (!ValidateEmail($("#InputEmail").val())) {

      $('#InputEmail').val("");

      return false;
    }
  });
  var email = $('#InputEmail').val();
  $.ajax({
    type: "POST",
    url: "emailvalidate.php",
    data: 'iEmail=' + email,
    success: function(data) {

      $("#eValidate").prop('disabled', true);

    }
  });
});

function ValidateEmail(email) {
  var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  return expr.test(email);
}

<form id="nfrm" name="nfrm" action="">
  <div style="color:#FFF">
    <label for="InputEmail">Input Email</label></div>
  <div class="form-group form-inline">
    <input class="form-control mr-sm-3" id="InputEmail" type="text" placeholder="Type your e-mail id here |" autocomplete="off"><span></span>
    <button class="btn btn-outline-notify my-2 my-sm-2" id="eValidate" style="background-color: #e5e6e7;" type="submit"><img src="asset/btn1.svg" width="20" height="20" class="d-inline-block mr-sm-1">NOTIFY ME</button>
  </div>
</form>

Answer 1

必须在live方法中编写ajax代码。代码更正如下。

$(document).ready(function() {

    $("#eValidate").live("click", function () {

        if (!ValidateEmail($("#InputEmail").val())) {

           $('#InputEmail').val("");

           return false;
           }

    var email = $('#InputEmail').val();
         $.ajax({
           type: "POST",
           url: "emailvalidate.php",
           data:'iEmail='+email,
           success: function(data){

           $("#eValidate").prop('disabled', true);

           }
         });
});

    });

Answer 2

使用.on代替.live Bug report for Rails 2.3.2
将ajax移至点击
测试ajax是否完全需要
为什么不根据返回结果禁用？

$(function() {
  $("#eValidate").on("click", function() {
    var email = $.trim($("#InputEmail").val());
    if (ValidateEmail(email)) {
      $.ajax({
        type: "POST",
        url: "emailvalidate.php",
        data: 'iEmail=' + email,
        success: function(data) {
          $("#eValidate").prop('disabled', true); // do you want to disable always?
          // if not use 
          // $("#eValidate").prop('disabled', data!="OK");
        }
      });
    } else {
      $("#InputEmail").val("");
    }
  });
});

Answer 3

@mplungjan - 即使在实现你的代码之后也没有用。我确实喜欢这个

function ValidateEmail(email) {
var expr =  /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
}
$(function() {
  $("#eValidate").on("click", function() {
    var email = $.trim($("#InputEmail").val());
    if (ValidateEmail(email)) {
      $.ajax({
        type: "POST",
        url: "emailvalidate.php",
        data: 'iEmail=' + email,
        success: function(data) {
           alert("Success!");

        }
      });
    });
    else {
      $("#InputEmail").val("");

    }
});

Ajax表单验证和提交无效

3 个答案: