Asp.net 只有在成功验证之后，才将ajax表单发送到web服务

我的目标是创建在客户端经过验证的表单，并且只有当表单有效时，才向ASMXWeb服务发送ajax调用。我设法分别完成这两项工作：客户端验证和ajax发送到web服务，我想将这两项结合起来。怎么做？。
我有这个表格（为了简单的例子，我简化了所有内容）：

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
                });
        });
  });

$(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();
  });
});

$(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
    });
  }
});

谢谢

您可以使用

.valdiate（）

的函数进行此操作，它仅在提交有效表单时执行（相反，它有一个

invalidHandler

），如下所示：

 $(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
                });
        });
  });

$(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();
  });
});

$(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
    });
  }
});

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

 $(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
                });
        });
  });

$(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();
  });
});

$(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

回调提交表单，您就可以完成所有设置。

您可以使用

.valdiate（）

的函数来完成此操作，它仅在提交有效表单时执行（其反面有一个

invalidHandler

），如下所示：

 $(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
                });
        });
  });

$(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();
  });
});

$(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
    });
  }
});

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

 $(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
                });
        });
  });

$(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();
  });
});

$(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

回调提交表单，您就一切就绪。

谢谢nick，但我仍然有一个问题：当提交类型=按钮时（就像在这些示例中一样），客户端验证工作，但如果有效，submitHandler根本不执行。当我更改submit to type=submit时，客户端验证工作，如果有效，submitHandler执行，但由于某种原因，webservice返回的内容类型是text\html，而不是预期的json（使用HttpFox进行测试）。如何解决此问题，或者如何从按钮类型调用submitHandler？谢谢！@eran-如果您只有

$（'input[type=button]'）。单击（function（）{$（this）.closest（'form'）.submit（）；）

它应该可以工作…任何调用提交处理程序的操作。@nick-o.k逐步进行..现在submitHandler使用type=按钮，所以现在我有一个最后的问题-来自web服务的数据以文本/html而不是json的形式接收。一切都很好，但我仍然很乐意按预期获得数据（当我在没有验证的情况下执行代码时，我得到的是json）。再次感谢！@eran-什么web服务？：）您可以发布调用此的代码吗？必须正确设置

contentType

和

dataType

，如下所示：

contentType:“application/json；charset=utf-8”，dataType:'json'

@nick现在一切正常！！问题是我的Web服务名称拼写错误（你可以在我的第一篇文章中看到这个调用-ContactFormMailer.asmx）。谢谢你，你很棒！谢谢nick，但我仍然有一个问题：当提交类型=按钮时（如这些示例中所示），客户端验证工作，但在有效时，submitHandler根本不执行。当我更改submit to type=submit时，客户端验证工作，在有效时，submitHandler执行，但由于某种原因，webservice返回的内容类型为text\html，而不是预期的json（使用HttpFox测试）。如何解决此问题？或者，如何从按钮类型调用submitHandler？谢谢！@eran-如果您只有

$（'input[type=button]'）。单击（function（）{$（this）.closest（'form'）。submit（）；}）

它应该可以工作…任何调用提交处理程序的操作。@nick-o.k逐步进行..现在submitHandler使用type=按钮，所以现在我有一个最后的问题-来自web服务的数据以文本/html而不是json的形式接收。一切都很好，但我仍然很乐意按预期获得数据（当我在没有验证的情况下执行代码时，我得到的是json）。再次感谢！@eran-什么web服务？：）您可以发布调用此的代码吗？必须正确设置

contentType

和

dataType

，如下所示：

contentType:“application/json；charset=utf-8”，数据类型：'json'

@nick现在一切正常！！问题是我的Web服务名称有拼写错误（你可以在我的第一篇文章中看到这个调用-ContactFormMailer.asmx）。谢谢你，太棒了！