I'm using validation plugin. I want to validate certain fields IN THE SAME form, when radio value is other than "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>
When role == "REGULAR", validate phone, password
When role == "AGENT", validate phone, password, work_area, work_phone
When role == "ORGANIZATION", validate phone, password, org_name, org_phone
How to achieve this elegantly ?
I don't want to divide it into different forms!
My false code :
$(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: "",
Above code won't work since its run only once after document.ready.
I must be missing something, some syntax..~ Idea ?
jquery validation rules
I got what I really needed from above link. What need to be solved here really is how to make the jQuery validator plugin behave DYNAMICALLY BASED on radio value for each input. I don't even use jQuery.change() method.
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');
}
}
If exist other idea, please let me know.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With