Hen*_* H. 7 jquery jquery-validate
我正在使用验证插件.当无线电值不是"REGULAR"时,我想验证同一形式的某些字段,
<form id="registerform">
<input type="radio" name="role" value="REGULAR" checked="checked" id="role">Regular<br />
<input type="radio" name="role" value="AGENT" id="role">Agent<br />
<input type="radio" name="role" value="ORGANIZATION" id="role">Organization<br />
<input type="text" name="phone" id="phone"><br/>
<input type="text" name="password" id="password"><br/>
<input type="text" name="work_area" id="work_area" value=""><br/>
<input type="text" name="work_phone" id="work_phone" value=""><br/>
<input type="text" name="org_name" id="org_name"><br/>
<input type="text" name="org_phone" id="org_phone"><br/>
</form>
Run Code Online (Sandbox Code Playgroud)
当role =="REGULAR"时,验证手机,密码
当role =="AGENT"时,验证手机,密码,work_area,work_phone
当role =="ORGANIZATION"时,验证手机,密码,org_name,org_phone
如何优雅地实现这一目标?
我不想把它分成不同的形式!
我的假代码:
$(document).ready(function() {
var rule_options =
{
"phone": "required"
,"password": "required"
};
var role = $("#registerform").find("input[name=role]:checked").val();
if(role == "AGENT") {
$.extend(true, rule_options,
{
"work_area": "required"
,"work_phone": "required"
}
);
}
if(role == "ORGANIZATION") {
$.extend(true, rule_options,
{
"org_area": "required"
,"org_phone": "required"
}
);
}
jform.validate({
errorClass : "err_label",
rules: rule_options,
ignore: "",
Run Code Online (Sandbox Code Playgroud)
上面的代码将无法工作,因为它只在document.ready之后运行一次.
我必须遗漏一些东西,一些语法......〜想法?
Hen*_* H. 10
jquery验证规则
我从上面的链接得到了我真正需要的东西.什么真的需要这里要解决的是如何让jQuery的验证插件的行为动态地根据每个输入无线电值.我甚至不使用jQuery.change()方法.
function getRole() {
return $("#registerform").find("input[name=role]:checked").val();
}
$(document).ready(function() {
var jform = $("#registerform");
jform.validate({
errorClass : "err_label",
rules:
"phone": "required"
,"password": "required"
,"work_area": {
required: function(element) {
return (getRole() == 'AGENT');
}
}
,"work_phone": {
required: function(element) {
return (getRole() == 'AGENT');
}
}
,"org_name": {
required: function(element) {
return (getRole() == 'ORGANIZATION');
}
}
,"org_phone": {
required: function(element) {
return (getRole() == 'ORGANIZATION');
}
}
Run Code Online (Sandbox Code Playgroud)
如果存在其他想法,请告诉我.