Mvc doesnt validate input type file

Question

I am using strongly type view model for my view , Validation works for all the text fields but it doesnt work for fileupload , below is the code:

        <div class="bg-content-inner">
            <% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("Create", "Track", FormMethod.Post, new { enctype = "multipart/form-data" }))
                  { %>
    <%: Html.ValidationSummary("Please Correct the errors and try again")%>
    <table cellpadding="2" cellspacing="2" border="0">

                    <tr>
                        <td style="width:100px;">



        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        </td>

                        <td colspan="2">
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Name, new { style = "width:300px;" })%>
            <%: Html.ValidationMessageFor(model => model.Name,"Circuit Name Required") %>
        </div>

         </td>
                    </tr>

                      <tr>
                        <td>
                           Main Image
                        </td>
                        <td>
                        <div class="editor-field">
                            <input type="file" name="files" id="file1" style="color:White" />
                            <%:Html.ValidationMessageFor(model => model.ImageLarge,"Required") %>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Detail Image
                        </td>
                        <td>
                        <div class="editor-field">
                            <input type="file" name="files" id="file2" style="color:White" />
                            <%:Html.ValidationMessageFor(model => model.ImageSmall,"Required") %>
                            </div>
                        </td>
                    </tr>

                    <tr></table>

Daniel · Accepted Answer · 2012-05-24 20:12:22Z

6

If you are using unobtrusive validation, the HtmlHelpers will insert some data-XXXX attributes to enable client-side validation... since MVC does not have a HtmlHelper for INPUT[FILE] and you have to manually insert the INPUT element... you can also add the data-XXXX attributes yourself... them and the client-side validation will work (well... at least in FF and Chrome... I have not tested it in others)... so...

replace:

<input type="file" name="files" id="file2" style="color:White" />

with:

<input type="file" name="files" id="file2" style="color:White" data-val="true" data-val-required="File is required" />

Hope it helps you.

answered May 24, 2012 at 20:12

Daniel

1,4941 gold badge13 silver badges19 bronze badges

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

2 Comments

Paul George Over a year ago

This works, and you can pull the message from the model attribute using the extensions method described in the accepted answer here (last update) stackoverflow.com/questions/10970184/…

Angel Over a year ago

This is so simple and so powerful! It extends the validation to so much more than just the input controls part of the model. Thanks a lot for sharing!

Dave · Accepted Answer · 2011-07-13 16:17:39Z

2

I think the validation message is looking for ImageLarge and ImageSmall to validate against. If you change the name and id attributes to match the model image names does it work? e.g
name="ImageLarge" id="ImageLarge"

answered Jul 13, 2011 at 16:17

Dave

3,8825 gold badges33 silver badges39 bronze badges

2 Comments

Mr A Over a year ago

Well if i cant change the name to imagelarge as I am using it on the backhand in create controller like : foreach (HttpPostedFileBase file in files)....

Dave Over a year ago

This might help with jQuery, there is also a plain JavaScript version in the link above: stackoverflow.com/questions/4222502/…

Wyatt Barnett · Accepted Answer · 2011-07-13 16:23:03Z

0

You can't client-side validate an <input type="file" />; it must be POSTed to the server and the upload examined, there just isn't a way around this.

answered Jul 13, 2011 at 16:23

Wyatt Barnett

15.7k3 gold badges37 silver badges54 bronze badges

3 Comments

Mr A Over a year ago

You mean there is no way in mvc i can validate html file upload , if one has selected the file or not

Wyatt Barnett Over a year ago

No, at least not with the built-in validation. Could perhaps do some javascript tricks to check manually.

Mr A Over a year ago

Have you got any tutorials or examples on how to acheive that using jquery

user571646 · Accepted Answer · 2011-07-14 03:15:19Z

0

May be AjaxSubmit helps you.

answered Jul 14, 2011 at 3:15

user571646

6655 silver badges11 bronze badges

Collectives™ on Stack Overflow

Mvc doesnt validate input type file

4 Answers 4

2 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related