title: jQuery to execute animation only after validation
body: <p>I'm building a web form with validation and AJAX requests in the background it's multiple forms on one page with animations in between. My problem is I want the submit button only to execute the animation after all of the validation is correct.</p>
  
  <pre><code>//jQuery ANIMATION
  $("#submit1").click(function(){
    $("#initial_form").animate({"left": "-=750px",opacity: 0.25,}) .fadeOut(1);
     $("#ipad_congratulations").delay(500) .fadeIn("slow");
  });
  
  //VALIDATION
   &lt;script type="text/javascript"&gt;
          /* &lt;![CDATA[ */
          jQuery(function(){
              jQuery("#firstname").validate({
                  expression: "if (VAL) return true; else return false;",
                  message: "&lt;br /&gt; First name please."
              });
              jQuery("#lastname").validate({
                  expression: "if (VAL) return true; else return false;",
                  message: "&lt;br /&gt;Last name too."
              });
              jQuery("#ValidNumber").validate({
                  expression: "if (!isNaN(VAL) &amp;&amp; VAL) return true; else return false;",
                  message: "Please enter a valid Zip Code"
              });
              jQuery("#ValidInteger").validate({
                  expression: "if (VAL.match(/^[0-9]*$/) &amp;&amp; VAL) return true; else return false;",
                  message: "Please enter a valid integer"
              });
              jQuery("#ValidDate").validate({
                  expression: "if (!isValidDate(parseInt(VAL.split('-')[2]), parseInt(VAL.split('-')[0]), parseInt(VAL.split('-')[1]))) return false; else return true;",
                  message: "Please enter a valid Date"
              });
              jQuery("#usremail").validate({
                  expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                  message: "&lt;br /&gt;Please enter a valid Email Addres"
              });
              jQuery("#ValidPassword").validate({
                  expression: "if (VAL.length &gt; 5 &amp;&amp; VAL) return true; else return false;",
                  message: "Please enter a valid Password"
              });
              jQuery("#ValidConfirmPassword").validate({
                  expression: "if ((VAL == jQuery('#ValidPassword').val()) &amp;&amp; VAL) return true; else return false;",
                  message: "Confirm password field doesn't match the password field"
              });
              jQuery("#ValidSelection").validate({
                  expression: "if (VAL != '0') return true; else return false;",
                  message: "Please make a selection"
              });
              jQuery("#ValidMultiSelection").validate({
                  expression: "if (VAL) return true; else return false;",
                  message: "Please make a selection"
              });
              jQuery("#ValidRadio").validate({
                  expression: "if (isChecked(SelfID)) return true; else return false;",
                  message: "Please select a radio button"
              });
              jQuery("#resident").validate({
                  expression: "if (isChecked(SelfID)) return true; else return false;",
                  message: ""
              });
              jQuery("#terms").validate({
                  expression: "if (isChecked(SelfID)) return true; else return false;",
                  message: ""
              });                
          });
          /* ]]&gt; */
      &lt;/script&gt;
  </code></pre>
  
  
  
  <p>
      </p>
  
  <pre><code> $(function(){
          $('#form').form({
              success:function(data){
                  $.messager.alert('Info', data, 'info');
              }
          });
      });
      &lt;/script&gt;
  </code></pre>