Question

I have the following part of my form:

<input type="checkbox" class="hide" id="additional-webinar" name="additional-webinar-check" value="additional-webinar-box">
<label class="hide" for="additional-webinar">Include Additional Webinar</label>

<div class="hide" id="additional-webinar-box" style="display:none;">
        <label class="title">Select Additional Webinar</label>
        <select name="additionalWebinarSelection">
            <option value="0" selected="">Please Select</option>
            <option value="173">Del All test(Elite Options Mastery)</option>
            <option value="171">Glob Test(Elite Futures Mastery)</option><option value="169">Test 2(Elite Futures Mastery)</option>
            <option value="167">Test(Elite Futures Mastery)</option><option value="164">Test(Elite Futures Mastery)</option>
            <option value="162">New Min TEst(Elite Futures Mastery)</option><option value="160">Min Height Test(Elite Options Mastery)</option>
            <option value="158">Title Yo(Elite Options Mastery)</option><option value="156">Title(Options Made Easy)</option>
            <option value="96">TT Test(Daily Wealth Report)</option>
        </select>
</div>

The div get’s shown if the checkbox is checked, otherwise it is hidden.

I have the following validator code on it

jQuery('#validate').click(function(){

    jQuery("form").validate({

        rules: {
            additionalWebinar: {
                required: {
                    depends: function() {
                        return jQuery('input[name=additional-webinar-check]').is(":checked")
                    }
                }
            }
        }
    })
});

However this always evaluates as true as the select element will always have a selected option. How do I get it to return false on the default. I have tried the following:

depends: function() {
    if(jQuery('input[name=additional-webinar-check]').is(":checked")) {
        var input = jQuery('select[name=additionalWebinarSelection]').val();

        if (input == 0) {
            alert(input);
            return false;
        } else {
            return true;
        }
    }
}

But to no avail.

There are no console errors that are triggered by calling the validate function (I am purposely forcing a call to it)

This is all being done on a WordPress blog using the Official jQuery Validator jQuery Plugin

So how is this done and/or what have I done wrong?

Answer 1

Josha,

AFAIK, Validator api require that the rules should have element ids. You need to add “additionalWebinar” as id of the select element.

jQuery('#validate').click(function(){
jQuery("form").validate({

    rules: {
        additionalWebinar: { // this has to be an Id of an Element
            required: {
                depends: function() {
                    return jQuery('input[name=additional-webinar-check]').is(":checked")
                }
            }
        }
    }
})
});