CODEWITHSUNDEEP
javascriptjqueryjquery-validate
aviad m
aviad m

Reputation: 186

jQuery Validate checkbox checked required?

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.

Upvotes: 10

Views: 69240

Answers (6)

ygaradon
ygaradon

Reputation: 2298

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/

Upvotes: 5

yash dharia
yash dharia

Reputation: 61

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>
  • give Checkbox name with square brackets.
  • Provide Value to Checkbox compulsory.

Jquery Code

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

Upvotes: 3

JORDANO
JORDANO

Reputation: 724

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

Upvotes: 0

Benjamin Grebner
Benjamin Grebner

Reputation: 62

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});

Upvotes: -4

webmustang
webmustang

Reputation: 199

Maybe your checkbox has css style

display: none

Replace it with 

visibility: hidden;
width: 0;

It helped to me.

Upvotes: 8

Barmar
Barmar

Reputation: 780673

You need to give a value to the checkbox. 

<input type="checkbox" name="terms" id="terms" value="accepted">

Upvotes: 4

Related Questions