仅在成功验证后将 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

您可以为此使用.valdiate() 的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 回调提交表单并一切就绪。