Question

这是我的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应用验证？

Answer 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;
       });

在这种情况下，如果至少一次验证失败 - 整个表单验证将失败。

P.S。最好订阅form提交事件并在那里处理验证： Prevent Default on Form Submit jQuery

Answer 2

如果验证失败

return false

将此添加到点击事件的末尾。

Answer 3

你也可以尝试这个

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

Answer 4

给这些元素class然后循环它们：

$("#saveBankDetails").click(function(){
    var all_elements = $('.newClass');
    all_elements.each(function () {
        if (!$(this).is(':visible')) {
            //do something if not visible
            return false;
        }
    });
});

Answer 5

按照@Samich的建议后，我想出了这个解决方案。它工作正常。

$('form').submit(function (event) {
           if($('#firstBankDetail').is(':visible')) {
               if(!validateFirstBankDetails()){
                   event.preventDefault();
               }
            }  
           if($('#secondBankDetail').is(':visible')) {
              if(!validateSecondBankDetails()){
               event.preventDefault();
              }
            }   
           if($('#thirdBankDetail').is(':visible')) {
               if(!validateThirdBankDetails()){
                   event.preventDefault();
               }
            }   
           if($('#fourthBankDetail').is(':visible')) {
               if(!validateFourthBankDetails()){
                   event.preventDefault();
               }
            }
       });

它也更容易

Answer 6

 $("#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;

Answer 7

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

成功验证后，jQuery将数据发布到服务器

7 个答案: