John John - 2 months ago 28
HTML Question

Applying validation on condition using jQuery Validate

Good morning guys, I wonder if you may help me on this issue: I'm applying a validation to a select element as required when another input value meets a condition. I'm using the validation jQuery plugin in order to do it. This is the pseudo-code:

if(textbox == "valueX"){mySelectEelement is required;}
(means that I must choose one value from the select element.). So for some reason the select element is not taking the validation I want to apply.

Please take a look on the full sample code I created for this purpose at Plunker:

<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>



$( function() {
$.validator.setDefaults({
//debug: true,
success: "valid"
});


$( "#myform" ).validate({
rules: {
borough: {
required: false
}
}
});

$('#state').on('change', function () {
if ($(this).val().toUpperCase() == "NY" || $(this).val().toUpperCase() == "NEW YORK") {
$('#borough').rules('add', {
required: true
});
} else{
$('#borough').rules('remove');
}
});
} );




</head>
<body>
<form id="myform">
<div>
<p id="pid"></p>
<input id='text' type='text' value='other'/>
</div>
<br/>
<input type="text" id="state" name="state" />

<select name="borough" id="borough">
<option value="" select="selected"></option>
<option value="Staten Island">Staten Island</option>
<option value="Brooklyn">Brooklyn</option>
<option value="Queens">Queens</option>
<option value="NY">NY</option>
</select>
</form></body> </html>


`

Answer

No need for external handlers and functions. You would use the depends property under required within the rules object to contain your conditional logic...

$("#myform").validate({
    rules: {
        borough: {
            required: {
                depends: function(element) {
                    if ($('#state').val().toUpperCase() == "NY" || $('#state').val().toUpperCase() == "NEW YORK") {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }
    }
});

DEMO: jsfiddle.net/ubkb0pmd/

Comments