Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use the <a href="http://docs.jquery.com/Plugins/Validation/validate#toptions" rel="nofollow noreferrer"><code>submitHandler</code> option</a> of <code>.valdiate()</code> for this, it only executes when a <em>valid</em> form is submitted (it has an <code>invalidHandler</code> for the opposite), like this:</p> <pre><code>$(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(); }); }); </code></pre> <p>Since you're not using <code>this</code> though, it might be much more readable in 2 functions, like this:</p> <pre><code>$(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 }); } }); </code></pre> <p>The only other change was shortening your call to <code>AjaxSuceeded</code> (maybe this can't be done, only because of your simplified example), but other than that...just submit the form from the <code>submitHandler</code> callback and you're all set.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload