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.

回答1:

Maybe your checkbox has css style

display: none

Replace it with

visibility: hidden;
width: 0;

It helped to me.

回答2:

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/

回答3:

You need to give a value to the checkbox.

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

回答4:

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

回答5:

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

回答6:

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

来源：https://stackoverflow.com/questions/21203866/jquery-validate-checkbox-checked-required

标签

javascript

jquery

jquery-validate