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

这是我的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等可见，我想要实现的是执行validation。 validateFirstBankDetails ， validateSecondBankDetails都是javascript函数。

我已经使用return来避免在validation失败时将数据发布到服务器。 但是，如果validateFirstBankDetails（）返回true，那么似乎会发布数据，因此代码不会向前移动。 我需要做哪些修改才能使代码向前推进并对secondBankDetail应用validation？

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

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

PS更好地订阅form提交事件并在那里处理validation： 防止表单上的默认值提交jQuery

Answer 2

如果validation失败

 return false 

将其添加到click事件的末尾。

Answer 3

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

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

Answer 4

你也可以试试这个

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