title: How to run a js script only if the other one is valid
body: <p>Hello i have a validation script of a form and i want to run the animation only when all fields are validated and seems i dont manage to make it working. i'll post my two scripts:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  
      // validate signup form on keyup and submit
      $("#msform").validate({
          rules: {
              nume: "required",
              prenume: "required",
              username: {
                  required: true,
                  minlength: 2
              },
              password: {
                  required: true,
                  minlength: 5
              },
              confirm_password: {
                  required: true,
                  minlength: 5,
                  equalTo: "#password"
              },
              email: {
                  required: true,
                  email: true
              },
              topic: {
                  required: "#newsletter:checked",
                  minlength: 2
              },
              agree: "required"
          },
          messages: {
              nume: "Please enter your firstname",
              prenume: "Please enter your lastname",
              username: {
                  required: "Please enter a username",
                  minlength: "Your username must consist of at least 2 characters"
              },
              password: {
                  required: "Please provide a password",
                  minlength: "Your password must be at least 5 characters long"
              },
              confirm_password: {
                  required: "Please provide a password",
                  minlength: "Your password must be at least 5 characters long",
                  equalTo: "Please enter the same password as above"
              },
              email: "Please enter a valid email address",
              agree: "Please accept our policy"
          }
  
      });
   $(\'#btn\').click(function() {
          $("#msform").valid();
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and here is the code i want to run only if the top one is valid</p>
  
  <pre><code>&lt;script&gt;//jQuery time
  var current_fs, next_fs, previous_fs; //fieldsets
  var left, opacity, scale; //fieldset properties which we will animate
  var animating; //flag to prevent quick multi-click glitches
  
  $(".next").click(function(){
      if(animating) return false;
      animating = true;
  
      current_fs = $(this).parent();
      next_fs = $(this).parent().next();
  
      //activate next step on progressbar using the index of next_fs
      $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  
      //show the next fieldset
      next_fs.show(); 
      //hide the current fieldset with style
      current_fs.animate({opacity: 0}, {
          step: function(now, mx) {
              //as the opacity of current_fs reduces to 0 - stored in "now"
              //1. scale current_fs down to 80%
              scale = 1 - (1 - now) * 0.2;
              //2. bring next_fs from the right(50%)
              left = (now * 50)+"%";
              //3. increase opacity of next_fs to 1 as it moves in
              opacity = 1 - now;
              current_fs.css({\'transform\': \'scale(\'+scale+\')\'});
              next_fs.css({\'left\': left, \'opacity\': opacity});
          }, 
          duration: 800, 
          complete: function(){
              current_fs.hide();
              animating = false;
          }, 
          //this comes from the custom easing plugin
          easing: \'easeInOutBack\'
      });
  });
  
  $(".previous").click(function(){
      if(animating) return false;
      animating = true;
  
      current_fs = $(this).parent();
      previous_fs = $(this).parent().prev();
  
      //de-activate current step on progressbar
      $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  
      //show the previous fieldset
      previous_fs.show(); 
      //hide the current fieldset with style
      current_fs.animate({opacity: 0}, {
          step: function(now, mx) {
              //as the opacity of current_fs reduces to 0 - stored in "now"
              //1. scale previous_fs from 80% to 100%
              scale = 0.8 + (1 - now) * 0.2;
              //2. take current_fs to the right(50%) - from 0%
              left = ((1-now) * 50)+"%";
              //3. increase opacity of previous_fs to 1 as it moves in
              opacity = 1 - now;
              current_fs.css({\'left\': left});
              previous_fs.css({\'transform\': \'scale(\'+scale+\')\', \'opacity\': opacity});
          }, 
          duration: 800, 
          complete: function(){
              current_fs.hide();
              animating = false;
          }, 
          //this comes from the custom easing plugin
          easing: \'easeInOutBack\'
      });
  });
  
  $(".submit").click(function(){
      return false;
  })
  &lt;/script&gt;
  </code></pre>