1

I just completed the visualization logic for my form and now I want to get use of the client side validation that asp.net mvc 3 provides. However even though I'm following some examples I can't make it work and I don't know what might be the reason.

Here is my main view :

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

Not too much here actually. Most of the logic is in my partials. I use data annotations so I thought that I'll have some client-side validation by default but it seems to not be the case. What I have done is making sure I have 

<appSettings>

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

</appSettings>

added to my web.config. Also in my view you can see that I've added 

@Html.ValidationSummary(true)

not sure if this is the right place for it but it's there. Also in the example that I'm looking from there is :

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

I don't have such <div> tags and such class names however when I start my application in the viewsource I can see for each input this :

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" />

which I thought is enough for client side validation to take place. But because I did not get any I added in one of my partial views just for test the following :

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

But even those two fields doesn't generate error when validation fails. So I guess I'm either missing something or I'm doing something wrong. I doubt if this kind of validation even works this way - with partials?

4

3 回答 3

7

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

  1. 在 Web.config 中

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

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

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

  3. 为模型验证属性提供错误消息以显示（例如）

    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() { }

    }

  4. 在视图中，显示错误消息

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

    或者

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

    像你一样。

  5. 实际上，它是这样工作的，但是对于局部视图中的 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");

注意部分视图不要加倍脚本并启用验证。此致

于 2013-09-03T13:27:22.863 回答
0

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

<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>
于 2013-05-21T14:04:59.470 回答
0

只是出于兴趣，您是否尝试过替换

@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")
于 2013-05-21T14:07:58.880 回答