Ajaxフォームの検証と送信が機能していません

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

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

1. 使用.onの代わりに、.live What's the difference between `on` and `live` or `bind`?
2. 移動]をクリックします
3. テストアヤックスが全く
4. なぜあなたはリターン結果に基づいて無効にしない必要がある場合に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 - あなたのcode.Iが.onのために推奨されていません。この

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

    } 
});