Validating File Upload - Jquery and "Accept" attribute

asp.net-mvc-3, asp.net-mvc-validation, jquery, jquery-validate

Solution

The "accept" rule-method that's built into jQuery Validation takes values in a format resembling "jpg|png".

The "accept" HTML attribute takes a format resembling "image/jpeg,image/png".

It would appear that jQuery Validation and the HTML standard are incompatible in this regard.

Here, you can read more about jQuery Validation's "accept" rule and the HTML5 "accept" attribute.

Problem

I am using a form to upload a file. I want only PDF files to be uploaded. This is my code: A input box to allow the user to choose a file: ``` @Html.FileBox(m => m.FileName, new { id = "FileName", accept = "application/pdf" }) ``` and a place to display error message(s): ``` @Html.ValidationMessageFor(m=>m.FileName) ``` The code generated for the input field is: ``` <input id="FileName" type="file" name="FileName" data-val-required="The File Name field is required." data-val-length-max="512" data-val-length="The field File Name must be a string with a maximum length of 512." data-val="true" accept="application/pdf"> ``` Now even if I choose a PDF file, I get an error `Please enter a value with a valid extension.` I am using MVC 3, and unobstrusive jquery to validate the form.

Original source