отправьте форму ajax на веб-сервис, только после успешной проверки

Question

Моя цель - создать форму, которая будет проверяться на стороне клиента, и только когда она действительна, отправлять вызов ajax веб-службе asmxМне удается сделать это по отдельности: проверка на стороне клиента и отправка ajax в веб-службу, и Я хочу объединить эти два.как? ..
у меня есть эта форма (я упрощаю все для простого примера):

<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 из .valdiate(), он выполняется только при отправке формы valid (для нее наоборот 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 и все готово.