Question

I have this simple bit of validation on my form:

<script type="text/javascript">

                    $(function()
                    {
                        $("#postform").validate({
                            rules: {
                                post_title: "required",
                                post_url: "required",
                                post_code: "required",
                                post_content: "required",
                                post_tags: "required"
                            }
                        });
                    });

                    </script>

BUT I don’t want to require post_url or post_code if certain radio buttons are not checked as they get hidden when I select them. e.g. here are the radios:

<li><label for="r1"><input type="radio" name="post_category" id="r1" value="12" checked="checked" /> Share an Article</label></li>
                                    <li><label for="r4"><input type="radio" name="post_category" id="r4" value="14" /> Share a Link</label></li>
                                    <li><label for="r3"><input type="radio" name="post_category" id="r3" value="13" /> Share some Code</label></li

and then this is the jquery code that hides or shows them:

<script type="text/javascript">

    jQuery(document).ready(function($)
    {
        $("input[name='post_category']").change(function()
        {
                $("#discussion-label").toggle(this.value == "12");
        });
        $("input[name='post_category']").change(function()
        {
                $("#code-container").toggle(this.value == "13");
                $("#code-label").toggle(this.value == "13");
        });
        $("input[name='post_category']").change(function()
        {
                $("#link-container").toggle(this.value == "14");
                $("#link-label").toggle(this.value == "14");
        });

        $("input#r1:checked").change();
        $("input#r3:checked").change();
        $("input#r4:checked").change();
    });

</script>

So the idea is that when user chooses the first radio button only post_title, post_content, and post_tags will be validated. If the user chooses the second radio button the it wil ALSO validate the post_url field, if they choose the third radio button then it will validate the post_code field BUT NOT the post_url anymore and vice-versa.

Can anyone help? Thanks

Answer 1

You can have conditional validation by using an object with a “depends” value instead of the string “required” for your validate object, like so:

$("#postform").validate({
    rules: {
        post_title: "required",
        post_url:  {
            required: {
                depends: function() {
                    return $('input[name=post_category]:checked').val() == '14';
                }
            }
        },
        post_code: {
            required: {
                depends: function() {
                    return $('input[name=post_category]:checked').val() == '13';
                }
            }
        },
        post_content: "required",
        post_tags: "required"
    }
});

The function is automatically used by the validation framework to check if validation should occur. If the function returns true it will validate, otherwise it will not. In this case, each function is finding which of the radios is checked and then comparing that radio’s value to the value we need it to have for validation to be necessary.