1

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>
0

4 Answers 4

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.

2
  • 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/… Commented Oct 25, 2012 at 11:47
  • 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!
    – Angel
    Commented Nov 10, 2017 at 9:05
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"

2
  • 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)....
    – Mr A
    Commented Jul 13, 2011 at 16:23
  • This might help with jQuery, there is also a plain JavaScript version in the link above: stackoverflow.com/questions/4222502/…
    – Dave
    Commented Jul 13, 2011 at 16:41
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.

3
  • You mean there is no way in mvc i can validate html file upload , if one has selected the file or not
    – Mr A
    Commented Jul 13, 2011 at 16:24
  • No, at least not with the built-in validation. Could perhaps do some javascript tricks to check manually. Commented Jul 13, 2011 at 16:30
  • Have you got any tutorials or examples on how to acheive that using jquery
    – Mr A
    Commented Jul 13, 2011 at 16:32
0

May be AjaxSubmit helps you.

Not the answer you're looking for? Browse other questions tagged or ask your own question.