CODEWITHSUNDEEP
jqueryjquery-validate
Hello Universe
Hello Universe

Reputation: 3302

jquery validation is not getting fired for checkboxes

I have a form where I am using jQuery validation to do validation from front end side.

Most of the validation are working as I want it to. However , for the checkboxes, the validation not working. I have the following rules and messages in my validation jquery

  $('#submitDetails').validate({
    // 1. validation rules.
    rules: {
    ......
    ......
    ......
      custom9: {
        required: true
      },
      custom10:{
          required:true
      },
      custom11: {
        required: true
      }
    },
    // 2. Validation fail messages
    messages: {
      custom9: {
        required: "You can only claim your Plush Rewards once you have received all your items found on your reciept"
      },
      custom10: {
        required: "You must agree to the terms of conditions in order to claim your Plush Rewards Prepaid Visa Gift Card"
      },
      custom11: {
        required: "You must agree to the terms of conditions in order to claim your Plush Rewards Prepaid Visa Gift Card"
      }
    ......
    ......
    ......

The html is

<div class="ticks">
    <div class="col-xs-12  tick1">
        <input type="checkbox" data-label="Have you received your entire order from Plush?" name="custom9" id="custom9" value="0" class="styled myClass prettyCheckable"><span class="mandatory tick1Mandatory"> * </span>

    </div>
    <!--<div id="error_msg"></div>  -->
    <div class="col-xs-12 tick2">
        <input type="checkbox" data-label="Please tick if you would like to join our mailing list and receive special bonus offers and the latest Plush news" name="custom10" id="custom10" value="1" class="styled myClass prettyCheckable" checked>
    </div>
    <div class="col-xs-12 tick3">
        <input type="checkbox" data-label="I have read and agree to the Terms and Conditions of this promotion and understand the Plush Privacy Policy" name="custom11" id="custom11" value="0" class="styled myClass prettyCheckable"><span class="mandatory tick2Mandatory"> * </span>

    </div>
</div>

When the submit button is clicked the validations concerned with custom9-11 do not get fired.

Upvotes: 2

Views: 6015

Answers (3)

mickmackusa
mickmackusa

Reputation: 47902

In my project, I ran into this same headache. It was due to the fact that my native checkboxes were being hidden by a togglable checkbox image(s). For this reason, my custom checkbox validation was never being called.

I resolved the issue by setting the ignore default to not ignore my hidden checkbox(es).

$('#myForm').validate({
    ignore: [':not(checkbox:hidden)'],
    rules: {
        confirmVacant: 'vacantChecked',
        // ...
    },
    // ...
});

Upvotes: 1

yash dharia
yash dharia

Reputation: 61

HTML Example for Checkbox Validation 

<label for="terms">terms : </label>
<input type="checkbox" name="terms[]" value="your value" id="terms">
  • give Checkbox name with square brackets.
  • Provide Value to Checkbox compulsory.

Jquery Code

rules: {
     'terms[]': { required: true },
},
messages:{
    'terms[]': "check the checbox"
}
  • Single quotes is compulsory for name

Upvotes: 1

Varis Vītols
Varis Vītols

Reputation: 158

It's probably a few years late, but just in case someone else runs into this problem:

From the markup I can tell you are using the prettyCheckable plugin for your checkboxes. Could it be possible that your actual checkboxes are hidden by prettyCheckable and the Validation plugin is ignoring them?

If that's the case, you could try fixing this by changing jquery.validate plugin's ignore setting:

    $.validator.setDefaults({ 
        ignore: [] // DON'T IGNORE PLUGIN HIDDEN SELECTS, CHECKBOXES AND RADIOS!!!
    });

Upvotes: 14

Related Questions