我正在尝试分别验证表单的不同部分。不幸的是,该表单是由 CMS 生成的,因此我的操作受到限制。
我已经尝试创建一个 validate
对象数组,使用当前表单部分作为索引。即:
//initialize validation
validators = [
$('#donation_amount').validate({ rules:{ amount: { required: true } } }),
$('#personal_information').validate({ rules:{ Street: { required: true } } })
];
并像这样移动各个部分:
$('#btn-next').click(function() {
//if validation is true, show next page
if (validators[curOrder].valid()) {
var old = $('.active');
var oldOrder = old.attr('data-order');
var newOrder = parseInt(oldOrder) + 1;
old.removeClass('active');
$("[data-order='" + newOrder + "']").addClass('active');
curOrder = newOrder;
}else{
console.log("invalid");
}
});
但是,验证始终返回 true
。
这是有问题的页面:https://salsa3.salsalabs.com/o/50388/p/salsa/donation/common/public/?donate_page_KEY=8461
最佳答案
当您自己编写一些 javascript 时,为什么还要使用 .validate 插件。单击时,只需检查输入值(如 $('#myInput').val().trim() == "") 并针对每个输入显示/隐藏相应的错误 div。
此外,对于多部分验证,仅验证必填字段并继续执行预期的操作。
$('#btn-next').click(function() {
var amountValid = $('#donation_amount').val().trim() == '' ? false : true;
var infoValid = $('#personal_information').val().trim() == '' ? false : true;
if (amountValid && infoValid) {
var old = $('.active');
var oldOrder = old.attr('data-order');
var newOrder = parseInt(oldOrder) + 1;
old.removeClass('active');
$("[data-order='" + newOrder + "']").addClass('active');
curOrder = newOrder;
}else{
console.log("invalid");
}
});
关于javascript - 多部分 jQuery 验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12590852/