jQuery Validation plugin not working with file input element

Question

I'm using the jQuery Validation plugin to limit the user to certain file types. As of now, it accepts any and all files, no matter what I do. I call it like this:

    $("#untForm").validate({
      ignore: [],
        rules: {
            fileName: {
                required: false,
                extension: "jpg|gif|png|mov|avi|pdf"
            }
        }
    });

and here is part of my form:

<input type="file" class="file_input_hidden" name="attachment" id="attachment" onchange="javascript: document.getElementById('fileName').value = this.value"   />

I've also tried this:

<input type="file" class="file_input_hidden" name="attachment" id="attachment" onchange="javascript: document.getElementById('fileName').value = this.value" accept=" "image/x-jpg, image/x-png, image/x-gif, application/pdf"  />

In the case below, if I use the extension parameter, it accepts any type of file!

$("#untForm").validate({
         ignore: [],
            rules: {
                fileName: {
                    required: false,
                    extension: "png|jpe?g|gif"
                }
            }
        });

Does anyone see anything wrong?

Sparky · Accepted Answer · 2013-09-03 20:58:03Z

1

"Does anyone see anything wrong?"

Yes...

rules: {
    fileName: {  // <- no such element with this name
        ....

It's simply not working because you don't have any file input element with the attribute name="fileName".

You must assign the rule using the name attribute of the relevant file input element.

If it's name="attachment" as per your question's HTML markup, then your jQuery needs to look like this...

$(document).ready(function() {

    $("#untForm").validate({
        ignore: [],
        rules: {
            attachment: { // <- name of input
                required: false,
                extension: "png|jpe?g|gif"
            }
        }
    });

});

I'm not sure what you're trying to achieve with the inline JavaScript, but you don't need a onchange handler for jQuery Validate to function properly. (actually, with jQuery, you'll never need to use an inline event handler again)

<input type="file" class="file_input_hidden" name="attachment" id="attachment" />

Working DEMO of your code: http://jsfiddle.net/yb9A8/

edited Sep 3, 2013 at 20:58

answered Sep 2, 2013 at 21:05

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1309220 Over a year ago

Ok makes sense. Here is my button - I'm doing it this way as I really want the user to click on an icon to select their attachment; <input type="text" id="fileName" name="fileName" title="Attach a file of type .jpg, .png, .gif, .pdf, .mov, .avi" > <div class="file_input_div"> <input type="hidden" value="attachment" class="file_input_button"><aria-hidden="true" data-icon=""> <input type="file" class="file_input_hidden" name="attachment" id="attachment" onchange="javascript: document.getElementById('fileName').value = this.value"

user1309220 Over a year ago

Sorry, don't know how to enter a longer reply... I actually submit the form later, after I take a screenshot. I'm wondering if this is affecting the way the validation is working..

Sparky Over a year ago

@user1309220, I correctly identified your problem as per the code you posted and demonstrated the solution in my jsFiddle. If that doesn't work because you failed to show enough code, then please edit your OP. Posting code in comments is not helpful to anyone. Then I'll gladly take a second look.

Sparky Over a year ago

@user1309220, from what I see in your comment however, you cannot validate the type='hidden' input. jQuery Validate can only validate <input type='text'>, <input type='radio'>, <input type='checkbox'>, <select>, and <textarea> elements. The ignore: [] option was only meant to validate those allowed elements when they are hidden or invisible.

Collectives™ on Stack Overflow

jQuery Validation plugin not working with file input element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related