asp.net - 仅在成功验证后才将 ajax 表单发送到 Web 服务

Question

我的目标是创建在客户端验证的表单，并且仅当它有效时，才向 asmx Web 服务发送 ajax 调用。我设法分别执行这两个操作:客户端验证和 ajax 发送到 Web 服务，并且我想将这两个结合起来。怎么办？..
我有这个表格(我简化了一切作为简单的例子):

<form id="ContactForm" runat="server">
   <label for="name">Full Name</label>
   <input type="text" name="name" id="name"/>
   <input id="submit"  type="button" />
</form>

客户端验证如下所示:

    $(document).ready(function() {
        $("#submit").click(function() {
            var validator = $("#ContactForm").validate({
                rules: { name: { required: true } },
                messages: { name: errName }
            }).form();
        });
    });

ajax 发送如下所示:

 $(document).ready(function() {
        $("#submit").click(function() {
          var myMailerRequest = {name: $('#name').val()};
          var data = JSON.stringify({req: myMailerRequest}); 
                $.ajax
                ({
                    type: "POST",
                    url: "ContactFormMailer.asmx/SendContactForm",                
                    data:  data,                 
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {                           
                    AjaxSucceeded(msg);                            
                 }, error: AjaxFailed
                });
        });
  });

谢谢!

Answer 1

您可以使用submitHandler option为此，它仅在提交有效表单时执行(它具有相反的invalidHandler)，如下所示:

$(function() {
  $("#submit").click(function() {
    var validator = $("#ContactForm").validate({
       rules: { name: { required: true } },
       messages: { name: errName },
       submitHandler: function() {
         var myMailerRequest = {name: $('#name').val()};
         var data = JSON.stringify({req: myMailerRequest}); 
         $.ajax({
                type: "POST",
                url: "ContactFormMailer.asmx/SendContactForm",                
                data:  data,                 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: AjaxSucceeded,
                error: AjaxFailed
         });
       }    
    }).form();
  });
});

由于您没有使用 this，因此它在 2 个函数中可能更具可读性，如下所示:

$(function() {
  $("#submit").click(function() {
    var validator = $("#ContactForm").validate({
      rules: { name: { required: true } },
      messages: { name: errName },
      submitHandler: ajaxSubmit
    }).form();
  });
  function ajaxSubmit() {
    var myMailerRequest = {name: $('#name').val()};
    var data = JSON.stringify({req: myMailerRequest}); 
    $.ajax({
      type: "POST",
      url: "ContactFormMailer.asmx/SendContactForm",                
      data:  data,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: AjaxSucceeded,
      error: AjaxFailed
    });
  }
});

唯一的其他更改是缩短对 AjaxSuceeded 的调用(也许这无法完成，只是因为您简化了示例)，但除此之外...只需从submitHandler 回调，一切就绪。