check that at least 1 checkbox is checked using javascript rules and messages [duplicate]

Question

I'm trying to display message that if no checkbox is checked . I'm using javvascript rules and messages

 <form   method="post" enctype="multipart/form-data name="english_registration_form" id="english_registration_form" >
   <div class="col-sm-12  inputgrp2 mstatu">
      <label class="labelclass">Marital Status*</label>
      <div id="result"></div>
      <span id="chkMaritalStatus" class="multiChkBox" >
         <div class="col-md-2 col-sm-3 col-xs-12">
            <input  type="checkbox" name="chkmstatus[]" value="Never Married  required">
            <label>Never Married</label>
         </div>
         <div class="col-md-2 col-sm-3 col-xs-12">
            <input   type="checkbox" name="chkmstatus[]" value="Awaiting Divorce" id="chkchild" required>
            <label >Awaiting Divorce</label>
         </div>
         <div class="col-md-2 col-sm-3 col-xs-12">
            <input  type="checkbox" name="chkmstatus[]" value="Seperated"  id="chkchild2" required>
            <label >Seperated</label>
         </div>
         <div class="col-md-2 col-sm-3 col-xs-12">
            <input  type="checkbox" name="chkmstatus[]" value="Widow/Widower"  id="chkchild3" required>
            <label>Widow/Widower</label>
         </div>
         <div class="col-md-2 col-sm-3 col-xs-12">
            <input  type="checkbox" name="chkmstatus[]" value="Divorced"  id="chkchild4" required> 
            <label >Divorced</label>
         </div>
         <div class="col-md-2 col-sm-3 col-xs-12">
            <input  type="checkbox" name="chkmstatus[]" value="Any" id="chkchild5" required>
            <label>Any</label>
         </div>
      </span>
   </div>
   <input type='submit' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='Finish' />
</form>

And this is my js

var $validator = $('.wizard-card form').validate({
          rules: {
'chkmstatus[]': {required: true},
 /*chkmstatus: {
                  required: function(elem)
            {
                return $("input.select:checked").length > 0;
            }
            },*/
 },

 messages: {
chkmstatus[]: "You must check at least 1 box",
}
});

I was trying to keep it as simple as possible and found this example here on site point but it doesn't seem to work how i'm using it.

ok i got it ..thanks @Aswin Ramesh

Archi Patel
– Archi Patel

2018-02-07 05:33:18 +00:00
Commented Feb 7, 2018 at 5:33 — Archi Patel
– Archi Patel, Commented Feb 7, 2018 at 5:33

Daniyal Nasir · Accepted Answer · 2018-02-07 06:06:18Z

1

You need to do the following:

Error: you need wrap chkmstatus[] in single-quotes like 'chkmstatus[]' inside messages.
Your solution: add min-length:1 as a rule of your 'chkmstatus[]' inside rules.

It would look like:

var $validator = $('.wizard-card form').validate({
    rules: {
        'chkmstatus[]': {
            required: true,
            minlength: 1, // <-- Add this line
        },
    },
    messages: {
        // add single quotes
        'chkmstatus[]': "You must check at least 1 box",
    }
});

jQuery-validate-minlength-method

Description: Makes the element require a given minimum length.

Works with text inputs, selects and checkboxes. Return false if the element is

some kind of text input and its value is too short

a set of checkboxes that doesn't have enough boxes checked

a select and doesn't have enough options selected

edited Feb 7, 2018 at 6:06

answered Feb 7, 2018 at 5:51

Daniyal Nasir

7078 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kishor Velayutham · Accepted Answer · 2018-02-07 05:31:05Z

0

Try this ..!

$("#english_registration_form").submit(function(){
    var checked = $("#english_registration_form input:checked").length > 0;
    if (!checked){
        alert("Please check at least one checkbox");
        return false;
    }
});

Check out this working fiddle: https://jsfiddle.net/Lj8mwa0o/

Hope this helps..!

answered Feb 7, 2018 at 5:31

Kishor Velayutham

8286 silver badges18 bronze badges

Collectives™ on Stack Overflow

check that at least 1 checkbox is checked using javascript rules and messages [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related