0

I've been struggling with this for a while, so I thought to seek help.

I hava a div filled with checkboxes and I need to validate if at least one checkbox was checked.

<div data-val="true" data-type="list-checkbox">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

Is there a way to use "jQuery.validator.addMethod" to add a validation to that particular DIV? I think it would be a lot cleaner if I could just add a function to validate, instead of injecting a javascript to validate before submitting the form.

I have tried something like this:

jQuery.validator.addMethod('requiredCheckboxList', function (value, element, params) {

    var div = $(element);
    //Some code to iterate through the div and check if at least one is checked
}, 'Wops!');

but it seems that the default behavior of the valitator does not check for divs marked as "data-val=true"

Thanks!

Sparky
  • 98,165
  • 25
  • 199
  • 285
Lucas Phillip
  • 185
  • 4
  • 15
  • I've seen some posts like this one (http://stackoverflow.com/questions/4936221/jquery-validate-plugin-on-div) telling it's not possible. But it was posted almost 4 years ago. So I thought something might have changed. – Lucas Phillip Dec 11 '14 at 20:12
  • Regarding your question, nothing has changed since [that question](http://stackoverflow.com/questions/4936221/jquery-validate-plugin-on-div) was posted. – Sparky Dec 11 '14 at 20:33

3 Answers3

2

With this plugin, there are some absolute requirements without a workaround...

  • You can only validate input, textarea and select elements. Period. (edit: contenteditable attribute is now supported on some elements as of version 1.15.0)
  • You can construct the layout using div elements however you wish, but the various data inputs must be within a <form></form> container.
  • you must have a unique name attribute on every data input. (A group of checkboxes is considered as a single data input.)

This is how you would achieve checkbox validation without the need to create any custom methods.

HTML:

<form id="myform">
    <div data-type="list-checkbox">
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
    </div>
    <input type="submit" />
</form>

jQuery:

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            foo: {  // 'name' of the field.
                required: true
            }
        }
    });

});

DEMO: http://jsfiddle.net/eLa8s5e4/

Quote OP:

"I think it would be a lot cleaner if I could just add a function to validate, instead of injecting a javascript to validate before submitting the form."

Not sure what this even means, "instead of injecting a javascript". No matter what method you choose with jQuery Validate, you'd still need the jQuery Validate plugin.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Sorry for my poor english. What I meant was that I have jquery validation working nicely. If I just add a function to iterate through the checkboxes on submit separate from validation, I'd have to worry about how the error message. I wanted to tell the validation that something was wrong to use it's current message display configuration. – Lucas Phillip Dec 12 '14 at 12:32
-1

Add an Id attribute on your HTML div element. Then use find function to check if any checkbox on that Div is checked or not.

<div id = "test" data-val="true" data-type="list-checkbox">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

jquery

 $("#test").find('input[type=checkbox]').each(function() {
   if( $(this).is(':checked')) {
   alert("what you want"); 
  }
});
Shibankar
  • 806
  • 3
  • 16
  • 40
  • What's this have to do with the jQuery Validate plugin? – Sparky Dec 11 '14 at 20:25
  • @Sparky : why to add an extra plugins. this way you can easily find out whether any checkbox is checked or not. – Shibankar Dec 11 '14 at 20:35
  • I am not debating whether the OP needs a plugin or not. I am pointing out that your answer has almost nothing to do with the OP's question. He wants to know about how to achieve something using jQuery Validate... he did not ask for alternative solutions to this plugin. – Sparky Dec 11 '14 at 20:44
  • If I just add a function to iterate through the checkboxes on submit separate from validation, I'd have to worry about how the error message. I wanted to tell the validation that something was wrong to use it's current message display configuration. – Lucas Phillip Dec 12 '14 at 12:33
-1

Just keep it simple

$('input[type="checkbox"]').change(function() {
    console.log(this.value); //check the value
    console.log(this.checked); //get the current state
});
user123_456
  • 5,635
  • 26
  • 84
  • 140