MVC 5 Foolproof client-side validation

Question

I'm having trouble with client-side validation with the nuget foolproof package.

My Model

public class Item {

    public int Id { get; set; }

    [Required]
    public double Quantity { get; set; }

    [RequiredIfNotEmpty("Quantity")]
    public string LocationCode { get; set; }
    public IEnumerable<SelectListItem> LocationList { get; set; }
}

In my View I have

    @model IList<MyApp.Models.Item>
    <!-- some HTML -->

    @for(int i = 0; i < Model.Count; i++)
    {
        <tr>
            <td>
                @Html.DropDownListFor(p => p[i].LocationCode, Model[i].LocationList, string.Empty, new { @class = "form-control" })                  
                @Html.ValidationMessageFor(p => p[i].LocationCode)
            </td>
            <td>
                @Html.TextBoxFor(p => p[i].Quantity, new { @class = "form-control"})
                @Html.ValidationMessageFor(p => p[i].Quantity)
            </td>
        </tr>
    }

In my _Layout.cshtml I have the following bundles included:

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")
@RenderSection("scripts", required: false)

And my jqueryval bundle looks like this:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*",
                        //"~/Scripts/MvcFoolproofJQueryValidation.min.js",
                        "~/Scripts/mvcfoolproof.unobtrusive.min.js"
                        //"~/Scripts/MvcFoolproofValidation.min.js"
                        ));

In my web.config I have:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

I've tried different combinations with mvcfoolproof js files, but I simply can't get the client-side validation to work. For the Quantity textbox it is working. Note that Server-side IS working.

@ThomasAndreèLian That's why I also have server-side validation — kwv84, Nov 23 '15 at 13:01
Your `[RequiredIfNotEmpty("Quantity")]` attribute does not make sense. `Quantity` is typeof `double` which can never be `null` so what is the point? — , Nov 24 '15 at 01:37

score 0 · Answer 1 · answered Nov 23 '15 at 14:15

0

Try to change model from IList to MyApp.Models.Item and pass only one item from controller to view. Client validation should work then. I think that @for() loop is the problem - you have multiple "Quantity" fields and razor can't choose correct one.

answered Nov 23 '15 at 14:15

Bartek Falkowski

67
6

MVC 5 Foolproof client-side validation

1 Answers1