驗證輸入之前AJAX調用

Question

我有這個彈出，用戶輸入自己的電子郵件地址：

<form class="form" id="PopupEmailForm"> 
      <div id="PopupEmail" class="modal fade" role="dialog"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-body"> 
          <a data-dismiss="modal">Close</a> 
          <p>Enter The Email:</p> 
          <input type="email" id="EmailInput" name="Email" placeholder="name@example.com" required="required" /> 
          <input type="submit" value="Send" id="PopupEmailSubmit" /> 
         </div> 
        </div> 
       </div> 
      </div> 
     </form> 

在提交時我做了以下內容：

$('#PopupEmailSubmit').click(function() { 

    $.ajax({ 
     type: "POST", 
     url: "controller/action", 
     data: { 
      Email: $('#EmailInput').val() 
     }, 
     beforeSend: function() { 
      $("#PopupEmailSubmit").prop('disabled', true); 
      $.growl({ 
       title: "Email Confirmation", 
       message: "Sending Email..." 
      }); 
     }, 
     success: function (res) { 
      if (res) { 
       $.growl.notice({ title: "Email Confirmation", message: "Email Sent!" }); 
       $('#PopupEmail').modal('hide'); 
      } else { 
       $.growl.error({ title: "Email Confirmation", message: "Email Not Sent. Try again later." }); 
      } 
      $("#PopupEmailSubmit").prop('disabled', false); // enable button 

     } 
    }); 
}); 

我想做驗證上在我調用ajax post方法之前的電子郵件輸入。

而且我想確認是相似的（內置），以HTML5驗證爲<input type="email"/>

誰能幫

Answer 1

由於您使用的一種形式，你也可以這樣做submit事件的形式而不是點擊按鈕

$('#PopupEmailForm').submit(function (event) { 
    event.preventDefault(); 
    //ajax call here 

}); 

Answer 2

試試這個：

$('#PopupEmailSubmit').click(function() { 
    var email = $('#EmailInput').val(); 
    // create a validation rule 
    if(validation successful) 
    { 
     // make ajax call 
    } 
    else 
    { 
     // show alert 
    } 
});