Question

我刚刚完成了表单的可视化逻辑，现在我想使用asp.net mvc 3提供的客户端验证。然而，即使我遵循一些例子，我也无法使其发挥作用，我不知道可能是什么原因。

以下是我的主要观点：

@model List<DataAccess.MCS_DocumentFields>

@{
    ViewBag.Title = "Documents";
}

<div id="drawForm">
@using (Html.BeginForm("RecieveDataFromDocument", "Forms", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <table border="1">
        <colgroup>
            <col span="1" style="width: 10%;" />
            <col span="1" style="width: 40%;" />
            <col span="1" style="width: 25%;" />
            <col span="1" style="width: 25%;" />
        </colgroup>
        @Html.Partial("_PartialHeader", Model)
        @Html.Partial("_PartialDrawing", Model)
        @Html.Partial("_PartialBody", Model)
        @Html.Partial("_PartialFooter", Model)
    </table>
    if (ViewBag.Status == 1)
    {
        <button type="submit">Save</button>   
    }
    else
    { 
        @Html.ActionLink("Back", "Index")
    }
}
</div>

实际上并不太多。大多数逻辑都在我的偏见中。我使用数据注释，所以我认为默认情况下我会进行一些客户端验证，但似乎并非如此。我所做的就是确保我有

<appSettings>

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

</appSettings>

已添加到我的web.config中。另外在我看来你可以看到我添加了

@Html.ValidationSummary(true)

不确定这是否适合它，但它就在那里。同样在我正在寻找的例子中：

<div class="editor-label">

    @Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

    @Html.TextBoxFor(model => model.Name)

    @Html.ValidationMessageFor(model => model.Name)

</div>

我没有这样的<div>标签和类名，但是当我在viewsource中启动我的应用程序时，我可以看到每个输入：

Name comes from DB
                <input data-val="true" data-val-required="The FieldValue field is required." name="[4].FieldValue" type="hidden" value="Name comes from DB" />

我认为足以进行客户端验证。但是因为我没有得到任何我在我的部分视图中添加的仅仅是为了测试以下内容：

<div class="editor-label">
                    @Html.DisplayFor(x => Model[i].QuestionText)
                    </div>
                    <div class="editor-field">
                    @Html.TextBox("datepicker", "", new { @class = "datepicker" })
                    @Html.ValidationMessageFor(x => Model[i].QuestionText)
                    </div>
                    @Html.HiddenFor(x => Model[i].Id)
                    //...some code...
                    <div class="editor-field">
                    @Html.EditorFor(x => Model[i].FieldValue)
                    @Html.ValidationMessageFor(x => Model[i].FieldValue)
                    </div>
                    @Html.HiddenFor(x => Model[i].Id)
                    //...more code..

但是，即使这两个字段在验证失败时也不会生成错误。所以我想我要么缺少一些东西，要么我做错了什么。我怀疑这种验证是否能以这种方式运行 - 有部分吗？

Answer 1

为了在mvc中获得客户端验证（我在mvc4上工作，但我认为在你的情况下它是一样的），有一些步骤需要检查：

在Web.config中

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

布局（或母版页）中的脚本

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

为模型验证属性提供要显示的错误消息（例如）

public class ContactForm
{
[Display(Name = "Mail :"),
Required(AllowEmptyStrings = false, ErrorMessage = "Mail required"),
RegularExpression("^(|[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+[.][a-zA-Z]{2,3})$", ErrorMessage = "Mail not valid"),
Remote("IsValidMail", "Validate", HttpMethod="GET")] /* remote validation */
public string Mail { get; set; }

[Display(Name = "Message :"),
Required(AllowEmptyStrings = false, ErrorMessage = "Message required"),
StringLength(maximumLength: 400, ErrorMessage="Message too long")]
public string Message { get; set; }

public ContactForm() { }

}

在视图中，显示错误消息

@Html.ValidationMessageFor(x=>x.Mail)

或

@Html.ValidationSummary(false, null, new { @id = "ValidationSummary" })

就像你做的那样。

实际上，它的工作原理是这样的，但是如果在部分视图中使用ajax表单，则需要在页面加载时重新绑定验证（在ajax调用的成功事件中或$（function（）{}局部视图）

///because the page is loaded with ajax, the validation rules are lost, we have to rebind them:
    $('#form').removeData('validator');
    $('#form').removeData('unobtrusiveValidation');
    $("#form").each(function () { $.data($(this)[0], 'validator', false); }); //enable to display the error messages
    $.validator.unobtrusive.parse("#form");

小心部分视图不要使脚本加倍并启用验证。最好的问候

Answer 2

尝试添加这些文件，也许可以帮助您：

<script src="/@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">     </script>
<script src="/@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"      type="text/javascript"></script>

<script src="/@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="/@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="/@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>

Answer 3

只是出于兴趣，你试过替换

@Html.Partial("_PartialHeader", Model)
@Html.Partial("_PartialDrawing", Model)
@Html.Partial("_PartialBody", Model)
@Html.Partial("_PartialFooter", Model)

与

@Html.EditorFor(m => Model, "_PartialHeader")
@Html.EditorFor(m => Model, "_PartialDrawing")
@Html.EditorFor(m => Model, "_PartialBody")
@Html.EditorFor(m => Model, "_PartialFooter")

客户端验证使用部分视图

3 个答案: