如何僅在另一個有效的情況下運行js腳本

Question

您好，我有一個窗體的驗證腳本，我只想在所有字段都經過驗證並且似乎無法使其工作的情況下運行動畫。我會後我的兩個腳本：

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

}); 
</script> 

這裏是代碼我想只有在最上面的一個有效運行

<script>//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; 
}) 
</script> 

Answer 1

首先把你所有的第二個腳本爲JS功能：

var onValid = function() { 
    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(){ 
    <...> 

    $(".submit").click(function(){ 
     return false; 
    }) 
} 

，然後添加一個調用該函數的代碼的第一個塊的有效代碼：

$('#btn').click(function() { 
    if ($("#msform").valid() { 
     onValid(); 
    } 
});