Need to check jQuery Validate checkbox?

I am using jQuery Validation plugin to validate form.

The problem is that I cannot find a way to check if one checkbox is selected in my form.

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.

+7
javascript jquery jquery-validate
source share
6 answers

You need to assign a value to the checkbox.

 <input type="checkbox" name="terms" id="terms" value="accepted"> 
+4
source share

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/

+4
source share

Maybe your checkbox has css style

 display: none 

Replace it

 visibility: hidden; width: 0; 

It helps me.

+4
source share

You need to wrap your code in a finished document jQuery method and check the check:

 $().ready(function () { $('#formId').validate({ rules: { terms: "required" }, messages:{ terms: "check the checbox" } }) }) 

I hope this helps

0
source share

JQuery Checkbox validation example

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> 
  • enter a flag name with square brackets.
  • Provide a value to the checkbox required.

JQuery code

 $(document).ready(function() { $("#demo").validate({ rules: { 'terms[]': { required: true }, }, messages:{ 'terms[]': "check the checbox" } }); }); 
0
source share

I just made my own annotation in C # and matched it with my jQuery validation. Now I just comment on any flag where this happens. If you are not using C #, you can simply just add the class to the element you want to apply 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}); 
-3
source share

All Articles