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.

Answer 1

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/