MVC 3验证 - 仅在失去焦点或提交后显示错误消息?

时间:2011-05-18 21:30:15

标签: validation asp.net-mvc-3 jquery-validate data-annotations

我已经使用DataAnnotations(必需,stringlength等)在我的MVC 3应用程序中设置了实体,并且MVC页面正确地显示了验证错误消息。但是,在用户有机会输入无效值之前,一旦页面加载到新表单上,就会显示错误消息。

几年前我使用过JQuery验证,并且只能在用户失去对某个字段的焦点或尝试提交表单后才显示错误消息。事实上,我认为这是默认行为。

无论如何使用DataAnnotations在MVC 3中做同样的事情吗?

编辑:这是HTML

<div class="form horizontal floated w50p">
<h3>Billing Information</h3>
@using(Html.BeginForm()){
    <div class="item">
        <div class="label">
            <label>* First Name</label></div>
        <div class="value">@Html.TextBoxFor(x => x.Name)</div>
        <div class="value">@Html.ValidationMessageFor(x => x.Name)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>* Address 1</label></div>
        <div class="value">@Html.TextBoxFor(x => x.Street1)</div>
        <div class="value">@Html.ValidationMessageFor(x => x.Street1)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>Address 2</label></div>
        <div class="value">@Html.TextBoxFor(x => x.Street2)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>Address 3</label></div>
        <div class="value">@Html.TextBoxFor(x => x.Street3)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>City</label></div>
        <div class="value">@Html.TextBoxFor(x => x.City)</div>
        <div class="value">@Html.ValidationMessageFor(x => x.City)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>State/Province/Region</label></div>
        <div class="value">@Html.TextBoxFor(x => x.StateProv)</div>
        <div class="value">@Html.ValidationMessageFor(x => x.StateProv)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>Zip / Postal Code</label></div>
        <div class="value">@Html.TextBoxFor(x => x.PostalCode)</div>
        <div class="value">@Html.ValidationMessageFor(x => x.PostalCode)</div>
    </div>
    <div class="item">
        <div class="label">
            <label>* Contact Phone</label></div>
        <div class="value">@Html.TextBoxFor(x => x.ContactPhone)</div>
        <div class="value">@Html.ValidationMessageFor(x => x.ContactPhone)</div>
    </div>        <input type="submit" value="Submit" />
}

2 个答案:

答案 0 :(得分:4)

默认行为正如您所描述的那样(只有在字段失去焦点或表单提交后才会出现错误)。因此,您的视图或控制器一定有问题。具体来说,它听起来像验证器认为用户即使在表单的第一个视图上也回发。表单的第一个视图应该是GET而不是POST。如果您粘贴控制器代码,这可能有助于我们更好地诊断它。

答案 1 :(得分:3)

你的意思是启用客户端验证?当然,这很容易。只是:

  1. 创建视图模型
  2. 装饰它
  3. 创建控制器
  4. 创建视图
  5. 包含正确的jquery脚本
  6. 让我们继续并遵循这些步骤。

    查看型号:

    public class ProductViewModel
    {
        [Required] // <-- you could use any data annotation attributes you like
        public string Name { get; set; }
    }
    

    控制器:

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var model = new ProductViewModel();
            return View(model);
        }
    
        [HttpPost]
        public ActionResult Index(ProductViewModel model)
        {
            return View(model);
        }
    }
    

    查看:

    @model ProductViewModel
    
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
    
    @using (Html.BeginForm())
    {
        @Html.LabelFor(x => x.Name)
        @Html.EditorFor(x => x.Name)
        @Html.ValidationMessageFor(x => x.Name)
        <input type="search" value="OK" />
    }
    

    现在将该字段留空并且假设在web.config中启用了客户端验证(默认情况下,当您使用默认的Visual Studio模板创建新的ASP.NET MVC 3项目时,它将启动):

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

    如果您想处理自定义验证属性,可以使用little more painful。一旦你面对现实世界的应用程序并使用属性(数据注释)意识到声明性验证的弱点,我强烈建议你查看FluentValidation.NET