JQuery mobile, validation plugin and collapsible content block

Question

i have a problem with this situation (http://jsfiddle.net/LFG8G/). In my mobile page there is a select menu element with a set of values (in my example 01,02,03) and a set of other controls inside a collapsible content block.

The form looks like this:

<div data-role="page" id="pagina">
    <form action="http://www.google.com" method="get" id="form1">
        <div data-role="content">
            <select name="myOption" id="myOption" data-native-menu="false">
                <option value="">&nbsp;</option>
                <option value="01">Value 01</option>
                <option value="02">Value 02</option>
                <option value="03">Value 03</option>

            </select>
            <input type="submit" data-role="button" value="Validate" />
            <div data-role="collapsible">
                <h3>Other fields</h3>
                <div>
                    <div data-role="fieldcontain">
                        <label for="f1"><strong>Field 1</strong></label>
                        <input type="text" name="f1" id="f1" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="f2"><strong>Field 2</strong></label>
                        <input type="text" name="f2" id="f2" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

I have to validate field before submit data to server and i have used jquery validation plugin.

When is selected a specific option menu (item 01) the fields in content block must be filled.

I have written the rule for this, but when press button validate, if the content is not visible to user, the validation code is not executed.

The javascript looks like this:

    $(document).live('pageshow', function (event, ui) {
        $('#form1').validate({
            ignore:'',
            rules: {
                myOption: {
                    required: true
                },
                f1: {
                    required: {

                        depends: function (el) {
                            if ($('#myOption').val() == "01") {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }
                },
                f2: {
                    required: {

                        depends: function (el) {
                            if ($('#myOption').val() == "01") {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }
                }
            }
        });
    });

Answer 1

By default the validate plugin does not validate hidden fields. What you need to do is add an option to your validate call that turns that off:

$('#form1').validate({
   ignore:'',
   //your other options
});

That's about it. See it working here: http://jsfiddle.net/ryleyb/LFG8G/1/