Question

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.

Answer 1

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.