Custom validate method not working - jQuery validate plugin
Question
I am trying to have a checkbox and a textfield, once the checkbox is checked, the field has to be required, I am trying to do this with jQuery validate plugin using a custom method as shown below:
$(function(){ $.validator.addMethod('ifIsCrime',function(value, element){ return $("#chckCrime").is(':checked');},'This is a required field'); $('form').validate({ rules: { txtJustification:{ required: true, }, } }); });
<!DOCTYPE html> <html> <head> <meta name="WebPartPageExpansion" content="full" /> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script> </head> <body> <div class="container-fluid" id="container"> <form> <fieldset> <legend>Personal Information</legend> <div class="form-group"> <label for="chckCrime">Have you even been convicted of a crime? If so, please provide details</label> <input type="checkbox" id="chckCrime" class="checkbox" name="chckCrime" /> </div> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <input class="form-control" type="text" id="txtJustification" placeholder="Click here to enter text" name="txtJustification" /> </div> </div> </div> <div class="row submitrow"> <div class="col-sm-12"> <input type="submit" value="Submit My Application" class="btn btn-primary pull-right"> </div> </div> </fieldset> </form> </div><!-- container--> </body> </html>
Any help would be great.
2 answers
solution1
1 ACCPTED 2015-09-06 13:32:04
Try adding your $.validator.addMethod AFTER $('form').validate.
Edit:
Also, I see that you haven't used the rule you've created, namely "ifIsCrime".
rules: {
txtJustification:{
required: true, ifIsCrime: true
}
}
EDIT2: Demo
My bad, now that I understand what you need, I wouldn't suggest a custom function for your requirement.
You could do it by replacing required: true with, required: '#chckCrime:checked'.
For your reference: jQuery validate - set conditional rules based on user selection
and a demo:
<form id="form">
<input class="form-control" type="text" id="test" placeholder="Click here to enter text" name="test" />
<input type="checkbox" id="chckCrime" class="checkbox" name="chckCrime" />
<input type="submit" value="Submit My Application" class="btn btn-primary pull-right">
</form>
JS being:
$(function(){
$('#form').validate({
rules: {
test:{
required: '#chckCrime:checked'
}
}
});
})
solution2
0 2015-09-06 13:45:30
The below code can help you. try it.
$(function(){
$.validator.addMethod('ifIsCrime',function(value, element){
if($("#chckCrime").is(':checked') && $("#txtJustification").val()==""){
return false;
}return true;},'This is a required field');
$('form').validate({
rules: {
txtJustification:{
ifIsCrime: true,
},
}
});
});
Jfiddle Link: http://jsfiddle.net/74ye34zg/4/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.