[英]jquery validation (using jquery validate plugin) - activating validation rules for specific elements based on the button clicked
好的,我在这里遇到了一个令人讨厌的问题。 我在研究中了解到,多次使用validate()无效。 因此,我建立了一个函数来响应某些单击的按钮的onclick。 这些按钮发送参数以标识要验证的元素。 我这样做是因为我正在使用.fadeOut()/。fadeIn()从一个部分到另一个部分无缝地移动。 单击第一部分按钮(将您带到第二部分)后,它将验证第一部分中的元素,如果第一部分被视为“有效”,则它将继续淡出/淡入到b部分。上。
问题是,尽管我已经为a和b部分设置了规则和消息,但是b部分似乎仍然没有验证。
这是我的代码-
function validation(page) {
var rules;
var messages;
var validator;
if (page == 'secA') {
rules = {
/*gneral information validation*/
gCompanyTxt: {
required: true,
minlength: 2
}
messages = {
/*general info validator messages*/
gCompanyTxt: {
required: "The 'Company' text box is empty safgadfgad",
minlength: "The 'Company' text box needs to have at least 2 characters"
}
};
validator = new jQueryValidatorWrapper("form1", rules, messages);
} else if (page == 'secB') {
rules = {
txtFirst: {
required: true,
minlength: 2
}
};
messages = {
txtFirst: {
required: "Your first name is required",
minlength: "Your first name needs to be at least two characters"
}
};
validator = new jQueryValidatorWrapper("form1", rules, messages);
}
if (!validator.validate()) {
return;
} else {
if (page == 'secA') {
$('#secA').hide();
$('#secB').fadeIn('slow');
} else if (page == 'secTwo') {
$('#secB').hide();
$('#secC').fadeIn('slow');
}
}
}
这些按钮是这样的:
<button type = "button" class="buttonSale" id="btnA" onclick="validation('secA')">Proceed to Section B</button>
<button type = "button" class="buttonSale" id="btnB" onclick="validation('secB')">Proceed to Section C</button>
这样做的结果是-单击“ btnA”时,代码可以有效地工作,如果内容为空或不正确,将触发验证,并且我可以对其进行修复然后继续。 但是,一旦我进入b部分并单击“ btnB”,它仅移至下一页,并且似乎跳过了if语句:
if (!validator.validate()) {
return;
}
我想我只是在这里遗漏了一些非常简单的东西,但是我厌倦了看它,需要专注于其他事情。 谢谢!
这是使用jQuery.Validate吗? 如果是这样,它将仅验证屏幕上可见的元素,因此您无需执行任何特殊逻辑即可更改规则。 只需一次分配所有规则,并确保它忽略隐藏的输入。
完成此操作后,您可以使用$(yourForm).validate().form()
绑定每个按钮上的click事件,以检查表单的验证状态,并返回到下一个面板(如果返回true)(有效)。 实际上,流程中的最后一个按钮应提交。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.