help with jquery validate plugin and checkboxes

Question

I have a checkbox group that I need to name uniquely to store values in a database separately. However, using jquery validate plugin, I cannot validate the group with names being different.

<label>Would you like to compete?</label>
      <input type="checkbox"  name="compete1" value="2" class="competecheckbox" >
      <label for="compete_no">No</label>
      <input type="checkbox" name="compete2" value="1" class="competecheckbox">
      <label for="compete_yes">Yes</label>
      <div id="competeyes">
        <label class="competeyestxt" hidden=true>Which Location?</label>
        <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt" hidden="true">
        </textarea>
      </div>

I tried adding

$.validator.addClassRules(
"competecheckbox", {required: true, minlength: 1});

This kinda works but it shows 2 error messages. One for each of the matching class 'competecheckbox'.

The problem is that even if the user selects compete1, the validation error message still remains for compete2.

How can I clear both messages when the user selects at least one checkbox?

thanks

truthSeekr · Accepted Answer · 2011-07-30 21:34:54Z

9

I ended up with something like this:

 <label>Would you like to compete?</label>
      <input type="checkbox"  name="compete[]" value="2" class="competecheckbox" >
      <label for="compete_no">No</label>
      <input type="checkbox" name="compete[]" value="1" class="competecheckbox">
      <label for="compete_yes">Yes</label>
      <div id="competeyes">
        <label class="competeyestxt" hidden=true>Which Location?</label>
        <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt" hidden="true">
        </textarea>
      </div>


When the form is submitted you get values in an array as compete[1], compete[2] etc.
I didn't know that you could do an empty array for form variable names.
Every day I find out how ignorant I am :)

The validation rule would look like

$('#survey').validate( {
    rules: {
        "compete[]": {
            required: true,
            minlength: 1
        }
  });

The quotes around "compete[]" are required as explained here:

http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

answered Jul 30, 2011 at 21:34

truthSeekr

1,6434 gold badges26 silver badges44 bronze badges

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

1 Comment

Snowalker Over a year ago

I use something similar and it's working but in my case, at least, I cannot use [ ] in the name of the fields. How can I accomplish this without using an array? Thanks :)

Andrew Whitaker · Accepted Answer · 2011-07-30 15:18:44Z

I would use the groups option for this. This option allows you to group whatever inputs you want:

$("#form").validate({
    groups: {
        competecheckbox: "compete1 compete2"
    },
    errorPlacement: function ($error, $element) {
        if ($element.attr("name") === "compete1" || $element.attr("name") === "compete2") {
            $error.insertAfter("label[for='compete_yes']");
        } else {
            $error.insertAfter($element);
        }
    }
});

Example: http://jsfiddle.net/z37Sj/

Notes:

errorPlacement is used to determine if the message is one of the grouped fields. If it is, the error is inserted after the "yes" checkbox (this is easily changeable). Otherwise, it takes its default position after the element.
The groups option is used to specify a group named competecheckbox which includes compete1 and compete2. These two fields are validated together.

Collectives™ on Stack Overflow

help with jquery validate plugin and checkboxes

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related