jQuery Validation plugin: validate check box

Question

I am using jQuery Validation plugin to validate check box since it does not have default option, One should be selected and max two check boxes can be selected, these is the criteria. I am not getting any error and it is not validating. I am extending it like below,

  <input type="checkbox" name="test[]" />x
   <input type="checkbox" name="test[]"  />y
   <input type="checkbox" name="test[]" />z
     $("#formid").validate({
  rules: {
    test[]: { 

            required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }

          },
messages: { 

    test[]: "You must check at least 1 box"
  }
 });

Sparky · Accepted Answer · 2013-03-16 19:18:26Z

You had several issues with your code.

1) Missing a closing brace, }, within your rules.

2) In this case, there is no reason to use a function for the required rule. By default, the plugin can handle checkbox and radio inputs just fine, so using true is enough. However, this will simply do the same logic as in your original function and verify that at least one is checked.

3) If you also want only a maximum of two to be checked, then you'll need to apply the maxlength rule.

4) The messages option was missing the rule specification. It will work, but the one custom message would apply to all rules on the same field.

5) If a name attribute contains brackets, you must enclose it within quotes.

DEMO: http://jsfiddle.net/K6Wvk/

$(document).ready(function () {

    $('#formid').validate({ // initialize the plugin
        rules: {
            'test[]': {
                required: true,
                maxlength: 2
            }
        },
        messages: {
            'test[]': {
                required: "You must check at least 1 box",
                maxlength: "Check no more than {0} boxes"
            }
        }
    });

});

Ghanshyam Gohel · Accepted Answer · 2019-08-02 20:01:48Z

You can validate group checkbox and radio button without extra js code, see below example.

Your JS should be look like:

$("#formid").validate();

You can play with HTML tag and attributes: eg. group checkbox [minlength=2 and maxlength=4]

<fieldset class="col-md-12">
  <legend>Days</legend>
  <div class="form-row">
    <div class="col-12 col-md-12 form-group">
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="1" required="required" data-msg-required="This value is required." minlength="2" maxlength="4" data-msg-maxlength="Max should be 4">Monday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="2">Tuesday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="3">Wednesday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="4">Thursday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="5">Friday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="6">Saturday
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="daysgroup[]" value="7">Sunday
        </label>
        <label for="daysgroup[]" class="error">Your error message will be display here.</label>
    </div>
  </div>
</fieldset>

You can see here first or any one input should have required, minlength="2" and maxlength="4" attributes. minlength/maxlength as per your requirement.

eg. group radio button:

<fieldset class="col-md-12">
  <legend>Gender</legend>
  <div class="form-row">
    <div class="col-12 col-md-12 form-group">
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="m" required="required" data-msg-required="This value is required.">man
        </label>
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="w">woman
        </label>
        <label class="form-check-inline">
          <input type="radio" name="gendergroup[]" value="o">other
        </label>
        <label for="gendergroup[]" class="error">Your error message will be display here.</label>
    </div>
  </div>
</fieldset>

You can check working example here.

jQuery v3.3.x
jQuery Validation Plugin - v1.17.0

Dhia Djobbi · Accepted Answer · 2021-03-09 09:05:55Z

Work for me:

<div class="col-lg-6">
    <div class="form-group mb-3">
        <label>Vendor Type<span class="text-danger">*</span></label>
        <div class="checkbox checkbox-success checkbox-inline">
            <input type="checkbox" name="vendorType" value="TABLE" id='table'>
            <label class="checkbox-inline" for="table"> Table </label>
        </div>
        <div class="checkbox checkbox-success checkbox-inline">
            <input type="checkbox" name="vendorType" value="MENU" id='menu'>
            <label class="checkbox-inline" for="menu"> Menu </label>
        </div>
        <div class="text-danger vendorType"></div>
    </div>
</div>

The validation code:

vendorType: {
    required: true,
    maxlength: 2
},

Error message:

vendorType: {
    required: "You must check at least 1 box",
    maxlength: "Check no more than {0} boxes"
},

No need to do this venderType[] just do vendorType

Ivijan Stefan Stipić · Accepted Answer · 2014-09-17 13:48:27Z

-1

There is the easy way

HTML:

<input type="checkbox" name="test[]" />x
<input type="checkbox" name="test[]"  />y
<input type="checkbox" name="test[]" />z
<button type="button" id="submit">Submit</button>

JQUERY:

$("#submit").on("click",function(){
    if (($("input[name*='test']:checked").length)<=0) {
        alert("You must check at least 1 box");
    }
    return true;
});

For this you not need any plugin. Enjoy;)

answered Sep 17, 2014 at 13:48

Ivijan Stefan Stipić

6,7386 gold badges51 silver badges85 bronze badges

3 Comments

Limon Over a year ago

Maybe it's shorter, but @ram uses validation plugin and that plugin uses the rules in order to validate

Ivijan Stefan Stipić Over a year ago

That's true but I put this like solution without additional libraries.

Ivijan Stefan Stipić Over a year ago

Yes. jQuery is only library for this solution. You don't need additional plugins or libraryes.

Collectives™ on Stack Overflow

jQuery Validation plugin: validate check box

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related