如果我正在使用jQuery的.hide（）和.show（）方法，如何將javascript驗證僅應用於HTML頁面上的可見元素？

Question

這是我的jQuery代碼段。

$("#firstBankDetail").hide();
$("#secondBankDetail").hide();
$("#thirdBankDetail").hide();
$("#fourthBankDetail").hide();
$("#noOfBankDetails").change(function(){
   var value = $(this).val();

   if(value == 0) {
       $("#firstBankDetail").hide();
       $("#secondBankDetail").hide();
       $("#thirdBankDetail").hide();
       $("#fourthBankDetail").hide();
   }
   else if(value == 1) {
       $("#firstBankDetail").show();
       $("#secondBankDetail").hide();
       $("#thirdBankDetail").hide();
       $("#fourthBankDetail").hide();  
   }
   else if(value == 2) {
       $("#firstBankDetail").show();
       $("#secondBankDetail").show();
       $("#thirdBankDetail").hide();
       $("#fourthBankDetail").hide(); 
   }
   else if(value == 3){
       $("#firstBankDetail").show();
       $("#secondBankDetail").show();
       $("#thirdBankDetail").show();
       $("#fourthBankDetail").hide();  
   }
   else if(value == 4){
       $("#firstBankDetail").show();
       $("#secondBankDetail").show();
       $("#thirdBankDetail").show();
       $("#fourthBankDetail").show();
   }

});

因此，在加載body時，所有div都被隱藏了。 #noOfBankDetails是一個下拉<select/>元素。 根據其值隱藏或顯示div。 我已經完成了所有div的javascript驗證。

現在我面臨一個問題，即那些div的驗證也被隱藏了。 假設即使只有#firstBankDetail可見，那么對#secondBankDetail ， #thirdBankDetail和#fourthBankDetail子元素的驗證也會失敗。

我要實現的偽代碼是

IF `#firstBankDetail` Visible
Apply validations of `#firstBankDetail` only
IF `#firstBankDetail` and `#secondBankDetail` visible
Apply validations of `#firstBankDetail` and `#secondBankDetail` only

如何使用javascript實現它？

Answer 1

使用jQuery的:visible選擇器 ：

$('#firstBankDetail:visible')

如果您的驗證方法只是validate() ，則可以使用：

$('#firstBankDetail:visible').validate();

要將驗證一次應用於所有可見元素，請查看#firstBankDetail ， #secondBankDetail等的父#secondBankDetail 。例如，如果您的HTML如下所示：

<div id="parent">
    <input id="firstBankDetail"/>
    <input id="secondBankDetail"/>
</div>

要對父級中所有可見元素調用validate()方法，可以簡單地使用以下方法：

$('#parent').children(':visible').validate();

Answer 2

嘗試一下，

$("#firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail").hide();
$("#noOfBankDetails").change(function(){
    var value = $(this).val();
    if(value == 0) {
       $("#firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail").hide();
    }
    else if(value == 1) {
       $("#firstBankDetail").show();
       $("#secondBankDetail,#thirdBankDetail,#fourthBankDetail").hide();
    }
    else if(value == 2) {
       $("#firstBankDetail,#secondBankDetail").show();
       $("#thirdBankDetail,#fourthBankDetail").hide(); 
    }
    else if(value == 3){
       $("#firstBankDetail,#secondBankDetail,#thirdBankDetail").show();
       $("#fourthBankDetail").hide();  
    }
    else if(value == 4){
       $("#firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail").show();
    }
});

將類bankDetail應用於您的字段＃firstBankDetail，＃secondBankDetail，＃thirdBankDetail，＃fourthBankDetail

//add this code in your script
$(".bankDetail:visible").validate();