jQuery Validation plugin check that at least one image was uploaded

Question

I have a form like this that allows users to upload images. Each image a user uploads is displayed in a div called imgHolder that's outside the form, and a file[] input from the upload form is removed (a user can only upload 5 files).

Problem i'm stuck with is, how can I use the the jquery validation plugin to check the imgHolder div to see if at least one image were uploaded? I don't need to check the file fields themselves. That I do in another way.

<div class="imgHolder">
    <div><img src="demo-1.jpg"><i class="icon-remove"></i></div>
</div>

Form

<form action="/us/imgpcr.php" method="post" enctype="multipart/form-data">
<div><input type="file" name="file[]"></div>
<div><input type="file" name="file[]"></div>
<div><input type="file" name="file[]"></div>
<div><input type="file" name="file[]"></div>
<input type="submit">
</form>

The way I use the plugin is simple.

$("#images").validate({
    rules: {
        albumTitle: {
            required: true,
            minlength: 10,
            maxlength: 25
        },
messages: {
        itemTitle: {
            required: "Please enter a valid title",
            minlength: "Minimum title length required is 10 characters",
            maxlength: "Maximum title length allowed is 25 characters"
        },

But is there a way to get the plugin to check a div that's out side the form?

Answer 1

Based on the code you posted (or lack thereof), it's impossible for the jQuery Validate plugin to have been working at all.

1) You cannot have multiple elements with the same name attribute. The name must be unique as this is how the plugin was designed to keep track of inputs. Something like this will work...

<input type="file" name="file[1]">
<input type="file" name="file[2]">
<input type="file" name="file[3]">
<input type="file" name="file[4]">

2) If you want at least one of these four input elements to be mandatory, you could use the require_from_group method which does exactly that. However, since all four input elements are identical to each other, simply make the very first one required .

$("#images").validate({
    rules: {
        "file[1]": {  // <- must use quotes on the name because of the brackets
            required: true
        },
        albumTitle: {
            required: true,
            minlength: 10,
            maxlength: 25
        }
    }, ....

3) You either intentionally made messages a child of rules or you forgot some closing braces. The messages option is a sibling of the rules option, not a child...

rules: {
    albumTitle: { // <- matches the 'name' attribute of the input
        ....
    }
},  // <- this brace was missing
messages: {
    itemTitle: {  // <- shouldn't this be the same 'name' used within 'rules'?
        ....
    }
},  // <- this brace was missing

4) I don't see any elements named albumTitle or itemTitle within your HTML markup as you posted it. You cannot validate any input element that does not exist within the form container.

5) You are attaching .validate() to #images ...

$("#images").validate({...

However, there is no id in your markup called images . The selector needs to match your form ...

<form id="images" action="/us/imgpcr.php" method="post" ....

---

Quote OP:

"But is there a way to get the plugin to check a div that's out side the form?"

You absolutely cannot validate a div under any circumstances. Nor can you validate any input element that is not contained within the form you've attached to .validate() .

The plugin can only validate <input> , <textarea> and <select> elements within a <form></form> container. There are no workarounds.

I don't understand the need for this request. Since you want to make sure a file is uploaded, simply make the input type="file" field required.

Otherwise, this plugin has no way to tell if a file has already been uploaded, it can only make the type="file" field mandatory.