jquery.validate.unobtrusive

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 表單驗證用什么好