Question

我有一个razor mvc 5视图，我想验证一些值。

模特

public partial class PersonViewModel
{
   [Required]
   public string FirstName { get; set; }

   [Required]
   public string LastName { get; set; }
}

视图

@using (Html.BeginForm("Process", "SomeController", FormMethod.Post, new { id = "processForm", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

<!-- Buttons -->
<div class="row btn-row">
    <div class="col-md-12">
        <div class="pull-right">
            <button class="btn btn-success"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
        </div>
    </div>
</div>
<!-- some more html -->
    for (int i = 0; i < Model.Count; i++)
    {
        <tr>
            <td>
                @Html.CheckBoxFor(m => m[i].ToBeProcessed, new {@id = "[" + i + "[.ToBeProcessed"})
            </td>
            <td>
                @Html.TextBoxFor(m => m[i].FirstName, new {@id = "[" + i + "].FirstName"})
                @Html.ValidationMessageFor(m => m[i].FirstName, "Please enter a value", new {@class = "text-danger"})
            </td>
            <td>
                @Html.TextBoxFor(m => m[i].LastName, new {@id = "[" + i + "].LastName"})
                @Html.ValidationMessageFor(m => m[i].LastName, "Please enter a value", new {@class = "text-danger"})
            </td>
        </tr>
    }
    <!-- some more html -->
    } <!-- form close -->

我只想验证选中复选框[i] .ToBeProcessed的行。应忽略其他行中的文本框。

在我的jQuery中，我有以下代码：

@section Scripts {
    @Script.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(function(){
            $("#processForm").validate({
                rules: {"[0].FirstName": {required: "[0].ToBeProcessed:checked"},
                       {"[1].FirstName": {required: "[1].ToBeProcessed:checked"},
                       {"[0].LastName": {required: "[0].ToBeProcessed:checked"},
                       {"[1].LastName": {required: "[1].ToBeProcessed:checked"} // note that this is only fixed for testing purposes
                });
            });
        </script>
}

现在，在运行代码时，选中第一个复选框并点击提交按钮，验证所有文本字段，而不是仅验证第一行中的文本字段。

Answer 1

您可以按如下方式添加验证，而不是最佳方式，但可以

 @for (int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>
                        @Html.CheckBoxFor(m=>m[i].ToBeProcessed, new { @id = "ToBeProcessed_" + i })
                    </td>
                    <td>
                        @Html.TextBoxFor(m=>m[i].FirstName, new { @id ="FirstName_"+i})
                        @Html.ValidationMessageFor(m => m[i].FirstName)
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m[i].LastName, new { @id = "LastName_"+i})
                        @Html.ValidationMessageFor(m => m[i].LastName)
                    </td>
                </tr>
            }

并生成验证规则

@section Scripts {
    @Script.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(function(){
        $('#processForm').validate();

        @for(int i = 0; i < Model.Count; i++)
        {
        <text>
        $("#FirstName_@i").rules("add", {
            required: "#ToBeProcessed_@i:checked"
        });

        $("#LastName_@i").rules("add", {
            required: "#ToBeProcessed_@i:checked"
        });

        </text>
        }
    });
    </script>
}

要获得更多控制权，您应该使用@Zabavsky文章链接。

Answer 2

使用Foolproof解决它因为我使用的是MVC 5，所以不应该包含所有的javascript文件。使其工作的步骤：

第1步 通过金块下载Foolproof（安装包装万无一失）

第2步在BundleConfig.cs中添加：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/mvcfoolproof").Include(                       
                    "~/Scripts/MvcFoolproofJQueryValidation.min.js",
                    "~/Scripts/mvcfoolproof.unobtrusive.min.js"));

第3步 将包添加到视图中（确保首先加载JQuery。对我来说，我已经在我的_Layout.cshtml中加载了JQuery包）以及我特定视图中的以下包：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/mvcfoolproof")
}

第4步 在我的模型中我有

public partial class Person
{
    public bool ToBeProcessed {get; set;}

    [RequiredIfTrue("ToBeProcessed")]
    public string FirstName {get; set;}

    [RequiredIfTrue("ToBeProcessed")]
    public string LastName {get; set;}
}

JQuery仅在选中复选框时才验证多行

2 个答案: