I'm using jQuery Validation plugin to validate a form.
The problem is that I can't find a way to validate if a single checkbox in my form is checked
HTML markup:
<label for="terms">terms : </label>
<input type="checkbox" name="terms" id="terms">
jQuery code:
rules: {
terms: "required"
},
messages:{
terms: "check the checbox"
}
Any help would be appreciated.
Maybe your checkbox has css style
display: none
Replace it with
visibility: hidden;
width: 0;
It helped to me.
HTML markup:
<label for="terms">terms : </label>
<input type="checkbox" name="terms" value="1" id="terms">
jQuery code:
rules: {
terms: {
required : true
}
},
messages:{
terms: {
required : "check the checbox"
}
}
jsfiddle: http://jsfiddle.net/mZ6zJ/
You need to give a value to the checkbox.
<input type="checkbox" name="terms" id="terms" value="accepted">
Example of Checkbox Jquery Validation
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<form id="demo">
<label for="terms">terms : </label>
<input type="checkbox" name="terms[]" value="your value" id="terms">
</form>
Jquery Code
$(document).ready(function() {
$("#demo").validate({
rules: {
'terms[]': { required: true },
},
messages:{
'terms[]': "check the checbox"
}
});
});
You need to wrap your code in the document ready jQuery method and a validate check:
$().ready(function () {
$('#formId').validate({
rules: {
terms: "required"
},
messages:{
terms: "check the checbox"
}
})
})
I hope this helps
I simply made my own annotation in C# and matched it with my jQuery validation. Now I just annotate any checkbox where this comes up. If you aren't using C# you can easily just add the class on element you wanted it applied to.
[System.AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
public class CheckboxRequired : ValidationAttribute, IClientValidatable
{
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if (value.GetType() != typeof(bool) || (bool)value == true)
return ValidationResult.Success;
return new ValidationResult("This checkbox must be checked.");
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ErrorMessage = "This checkbox must be checked.",
ValidationType = "CheckboxRequired"
};
yield return rule;
}
}
And in my Validation.js
jQuery.validator.addMethod("CheckboxRequired", function (value, element) {
return (value != typeof undefined && value != false);});
jQuery.validator.addClassRules("CheckboxRequired", { CheckboxRequired: true});
