CODEWITHSUNDEEP
javascriptjqueryformsjquery-validate
vaindil
vaindil

Reputation: 7854

jQuery Validate dependency-expression

I'm trying to set up a jQuery Validate dependency-expression so that users need to either use the text field OR upload a file, but this code is not working: both fields are always required. I'm guessing <input type="file"> isn't supported by #id:empty, but what can I use in its place?

Here's a jsFiddle.

Javascript:

jQuery(document).ready(function() {
    jQuery("#form1iienom").validate({
        errorClass:"errorlabels",
        rules: {
            form1apptext: {
                required: "#form1upload:empty"
            },
            form1upload: {
                required: "#form1apptext:empty",
                extension: "jpg|jpeg|pdf|png|doc|docx"
            },
        },
        messages: {
            form1apptext: "You must either enter a reason for your nomination or upload a file.",
            form1upload: {
                required: "You must either enter a reason for your nomination or upload a file.",
            },
        }
    });
});

HTML:

<form name="form1iienom" id="form1iienom" method="post" action="/applications/iie/review" enctype="multipart/form-data">
<textarea name="form1apptext" id="form1apptext"></textarea><br />
<br />
<em>(allowed file types are jpg, jpeg, pdf, png, doc, and docx; maximum file size is 3 MB)</em>
<input type="hidden" name="MAX_FILE_SIZE" value="3145728" />
<input type="file" name="form1upload" id="form1upload" /><br />
<input type="submit" value="Submit" />
</form>

Upvotes: 1

Views: 318

Answers (1)

Sparky
Sparky

Reputation: 98738

As per documentation, the proper selector is :blank, not :empty.

Also see the example, as per documentation, using the depends sub-rule...

rules: {
    contact: {
        required: true,
        email: {
            depends: function(element) {
                return $("#contactform_email:checked")
            }
        }
    }
}

Upvotes: 1

Related Questions