ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误

在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能，可以在运行时由服务器端根据Model中设置的验证规则，自动生成客户端验证js代码（结合jquery.validate）。这很好地解决了表单验证时一次代码，两次验证（客户端+服务器端）的问题。

使用它很简单，主要操作步骤如下：

1. 在web.config增加如下设置：

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

2. 在NuGet中引用jquery.validate与jquery.validate.unobtrusive

3. 在页面中添加js引用：

<script type="text/javascript" src="/scripts/jquery.validate.min.js"></script>       
<script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

4. 在model中添加验证规则，示例代码如下：

public class SignupUser
{
    [Required(ErrorMessageResourceName = "DefaultRequireErrorMsg", 
        ErrorMessageResourceType = typeof(Resources))]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }
}

5. 在页面中添加表单生成代码，比如：

@using(Html.BeginForm())
{   
    @Html.LabelFor(m=>m.Email)
    @Html.TextBoxFor(m=>m.Email)
    @Html.ValidationMessageFor(m=>m.Email)           
}

参考文章：Unobtrusive JavaScript in ASP.NET MVC 3

进入正题

默认情况下，jquery.validate.unobtrusive只在点击表单提交按钮时才触发验证，验证出错时，光标移入输入框不会清除错误提示信息（jquery.validate也一样，unobtrusive只是jquery.validate的一个扩展）。

而我们的需求是，只要光标移出输入框（onfocusout）就触发验证，光标移入输入框（onfocusin）时清除错误信息。

效果如下：

1. 光标移出（onfocusout）时

2. 光标移入（onfocusin）时

如何解决这个问题呢？

解决方法是简单的，找到解决方法的过程是曲折的。

jquery.validate对这个需求并没有提供很好的支持，需要研究它的代码，接管onfocusout与onfocusin的事件处理，并屏蔽onkeyup的事件处理。最终解决问题的代码如下：

针对jquery.validate.unobtrusive：

$.validator.setDefaults({
    //光标移出时
    onfocusout: function (element) {
        this.element(element);
    },
    //光标移入时
    onfocusin: function (element, event) {
        //找到显示错误提示的标签并移除,针对jquery.validate.unobtrusive
        var errorElement = $(element).next('span.field-validation-error');
        if (errorElement) {
            errorElement.children().remove();
        }
    },
    onkeyup: function (element, event) {
    }
});

如果没有使用jquery.validate.unobtrusive，想在jquery.validate中实现同样的效果，对应的代码如下：

$.validator.setDefaults({
    //光标移出时
    onfocusout: function (element) {
        this.element(element);
    },

    //光标移入时
    onfocusin: function (element, event) {
        //仅针对jquery.validate
        var errorElement = this.errorsFor(element);
        if (errorElement) {
            errorElement.remove();
        }
    },
    onkeyup: function (element, event) {
    }
});

好了，这篇博文就是为了分享一下自己摸索出来的解决方法。

 

相关博问：ASP.NET MVC 表单验证用什么好