0

これが私のjQueryスニペットです

  $("#saveBankDetails").click(function(){
           if($('#firstBankDetail').is(':visible')) {
               return validateFirstBankDetails();
            }     
           if($('#secondBankDetail').is(':visible')) {
               return validateSecondBankDetails();
            }   
           if($('#thirdBankDetail').is(':visible')) {
               return validateThirdBankDetails();
            }   
           if($('#fourthBankDetail').is(':visible')) {
               return validateFourthBankDetails();
            }   
       });

私が達成したいのは、要素 firstBankDetail 、 secondBankDetail などが表示されている場合に検証を実行することです。validateFirstBankDetails、validateSecondBankDetailsすべてJavaScript関数です。

検証が失敗した場合にデータをサーバーに投稿するのを避けるために return を使用しました。ただし、validateFirstBankDetails() が true を返すとデータが送信されるようで、コードが先に進みません。コードが先に進み、secondBankDetail にも検証を適用するには、どのような変更を行う必要がありますか?

4

7 に答える 7

1

結果を単一の変数に収集します。

$("#saveBankDetails").click(function(){
           var restult = true;
           if($('#firstBankDetail').is(':visible')) {
               result &= validateFirstBankDetails();
            }     
           if($('#secondBankDetail').is(':visible')) {
               result &= validateSecondBankDetails();
            }   
           if($('#thirdBankDetail').is(':visible')) {
               result &= validateThirdBankDetails();
            }   
           if($('#fourthBankDetail').is(':visible')) {
               result &= validateFourthBankDetails();
            }   

           return result;
       });

この場合、少なくとも 1 つの検証が失敗すると、フォームの検証全体が失敗します。

PSイベントを送信するためにサブスクライブし、formそこで検証を処理することをお勧めします： フォーム送信jQueryのデフォルトを防止します

于 2013-10-04T10:46:31.317 に答える
0

これを試すこともできます

$("#saveBankDetails").click(function(){
       var result = false;
       if($('#firstBankDetail').is(':visible')) {
           result = validateFirstBankDetails();
        }     
       if($('#secondBankDetail').is(':visible')) {
           result = validateSecondBankDetails();
        }   
       if($('#thirdBankDetail').is(':visible')) {
           result = validateThirdBankDetails();
        }   
       if($('#fourthBankDetail').is(':visible')) {
           result = validateFourthBankDetails();
        }
       return result;
   });
于 2013-10-04T10:48:45.830 に答える
0

それらの要素に aclassを与えてから、それらをループします。

$("#saveBankDetails").click(function(){
    var all_elements = $('.newClass');
    all_elements.each(function () {
        if (!$(this).is(':visible')) {
            //do something if not visible
            return false;
        }
    });
});
于 2013-10-04T10:49:11.140 に答える
0

検証が失敗した場合

return false

これをクリックイベントの最後に追加します。

于 2013-10-04T10:46:30.300 に答える
-1 
$("#saveBankDetails").click(function(){
       var result = 0; var visible = 0;
       if($('#firstBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }     
       if($('#secondBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }   
       if($('#thirdBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }   
       if($('#fourthBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }   
       if(result == visible) {return true;}
       else{return false;}
   });
于 2013-10-04T10:58:58.290 に答える
-1 
 $("#saveBankDetails").click(function(){
       if($('#firstBankDetail').is(':visible')) {
           return validateFirstBankDetails();
        }     
       if($('#secondBankDetail').is(':visible')) {
           return validateSecondBankDetails();
        }   
       if($('#thirdBankDetail').is(':visible')) {
           return validateThirdBankDetails();
        }   
       if($('#fourthBankDetail').is(':visible')) {
           return validateFourthBankDetails();
        } 
       return false;

   });

制御をサーバーに戻したくない場合は、return false; を追加できます。

于 2013-10-04T10:47:49.560 に答える