Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

conditional jquery validation based on radio value in form

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 ?

like image 615
Hendry H. Avatar asked Feb 11 '13 08:02

Hendry H.


1 Answers

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.

like image 179
Hendry H. Avatar answered Nov 17 '22 09:11

Hendry H.