Checkbox conditional validation in jQuery

Question

I'm trying to make a form that validates 1 dropdown only if a checkbox is unchecked. I ended up with the following code:

HTML

<label for="chk">Checkbox</label>
    <input type="checkbox"  class="chk" ID="chkID" name="mychkBox" checked="checked" value="true"/>

<select ID="dropdownID" name="myDropdown" title="please select something">
    <option value="0">-Select-</option>
        <option value="1">-Option1-</option>
</select>

Javascript

$("#my-form").validate({
        rules: {
            myDropdown: {
                  required: "#chkID:unchecked",
                                  min:1
            }

        }//rules

});// end
$("#chkID").click(function() {          
      $("#dropdownID").valid();
      alert('gothere');
});

problem is it doesn't work, the form still submits. anyone know what I am missing/doing wrong?

-edit- Do I need to check for anything if the dropdown is being populated by JSON? will this work the dame way?. Reason I ask is that the form works as intended before any errors in validation but afterwards it requires the dropdown even if the checkbox is checked or unchecked. This is exactly what I am trying to do though...

-edit- Nevermind, I just hid/disabled the offending dropdown when the checkbox is checked so it will not validate

but I marked the answer "answered" since I forgot to mention about dynamically loaded content/HTML.

i couldn't see your form. but check box click function you are doing $("#dropdownID").valid(); which is wrong use form id instead of selector id. checkbox validation here---stackoverflow.com/questions/297555/… — mini
– mini, Commented Mar 8, 2012 at 6:46
validation runs fine if I remove: "details: {required: "#chkID:unchecked"}" Tried using the form ID instead of the dropdown's the form still submits. — rax313
– rax313, Commented Mar 8, 2012 at 7:29

Mike Mertsock · Accepted Answer · 2012-03-08 14:31:03Z

3

In your HTML markup your select element is named myDropdown, and in your jQuery code you refer to it as details. Try changing your validation config to:

rules: { myDropdown: { required: "#chkID:unchecked" } }

Edit

Also, your default option in the select element should have an empty value. Otherwise the required rule will always be satisfied:

<option value="">-Select-</option>

I created a jsFiddle that should accomplish what you need: http://jsfiddle.net/BGWbu/

edited Mar 8, 2012 at 14:31

answered Mar 8, 2012 at 7:03

Mike Mertsock

12k8 gold badges44 silver badges77 bronze badges

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

4 Comments

rax313 Over a year ago

It now validates but does not care if the checkbox is unchecked or not. see my edit to view the changes I made

Mike Mertsock Over a year ago

The problem is that your default option in the select element has a non-empty value. I updated my answer with more details.

rax313 Over a year ago

Do I need to check for anything if the dropdown is being populet by JSON? will this work the dame way?

Mike Mertsock Over a year ago

Should work the same way. The validator won't care how or when during the page lifecycle the dropdown is populated, just what values its option elements have in the DOM at the moment you are calling .valid() or submitting the form.

labroo · Accepted Answer · 2012-03-08 06:54:17Z

0

I am not sure if there is a 'unchecked' selector, :S

try

"#chkID:not(:checked)"

also may be you need an if block, valid() returns boolean

if($("#dropdownID").valid()){
    alert('goThere');
}

edited Mar 8, 2012 at 6:54

answered Mar 8, 2012 at 6:29

labroo

2,9714 gold badges30 silver badges36 bronze badges

1 Comment

rax313 Over a year ago

docs.jquery.com/Plugins/Validation/unchecked <--I just got it from this example. changed it and still isn't working. =(

Collectives™ on Stack Overflow

Checkbox conditional validation in jQuery

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related