send ajax form to web service, only after successful validation

Question

my target is to create form that validated in the client side, and only when it is valid, send ajax call to asmx web service. i manage to do that two separately: client-side validation and ajax send to web service, and i want to combine this two. how?..
i have this form (i simplify everything for simple example):

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

the client validation looks like:

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

and the ajax send looks like this:

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

Thanks!

Answer 1

You can use the submitHandler option of .valdiate() for this, it only executes when a valid form is submitted (it has an invalidHandler for the opposite), like this:

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

Since you're not using this though, it might be much more readable in 2 functions, like this:

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

The only other change was shortening your call to AjaxSuceeded (maybe this can't be done, only because of your simplified example), but other than that...just submit the form from the submitHandler callback and you're all set.