ASP. NET MVC unobtrusive JavaScript implements Onfocusout validation, Onfocusin clears errors

Enable the unobtrusive JavaScript feature in ASP. The client-side validation JS code (combined with jquery.validate) can be automatically generated at run time by the server end based on the validation rules set in model. This solves the problem of the form validation one time code, two authentication (client + server side).

Using it is simple, the main steps are as follows:

1. Add the following settings to the Web. config:

<appSettings>    <add key= "clientvalidationenabled" value= "true"/>    <add key= " Unobtrusivejavascriptenabled "value=" true "/></appsettings>

2. Quoting Jquery.validate and jquery.validate.unobtrusive in NuGet

3. Add a JS reference to the page:

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

4. Add a validation rule to the model, the sample code is as follows:

public class signupuser{    [Required (errormessageresourcename = "Defaultrequireerrormsg",         Errormessageresourcetype = typeof (Resources)]    [DataType (datatype.emailaddress)] public    string Email {get; Set }}

5. Add the form generated code to the page, such as:

@using (Html.BeginForm ()) {       @Html. Labelfor (m=>m.email)    @Html. Textboxfor (m=>m.email)    @ Html.validationmessagefor (m=>m.email)           }

Reference article: Unobtrusive JavaScript in ASP. NET MVC 3

Go to the Chase

By default, Jquery.validate.unobtrusive only triggers validation when the form Submit button is clicked, and when an error is verified, the cursor moves into the input box without clearing the error message (Jquery.validate, unobtrusive is just an extension of jquery.validate).

Our requirement is that whenever the cursor moves out of the input box (onfocusout), the validation is triggered and the error message is cleared when the cursor moves into the input box (onfocusin).

The effect is as follows:

1. When the cursor moves out (onfocusout)

2. When the cursor moves in (onfocusin)

How to solve this problem?

The solution is simple and the process of finding a solution is tortuous.

Jquery.validate does not provide good support for this requirement, it needs to study its code, take over Onfocusout and Onfocusin event handling, and block onkeyup event handling. The final code to solve the problem is as follows:

For jquery.validate.unobtrusive:

$.validator.setdefaults ({    //    onfocusout:function (Element) {this.element (Element) when the cursor is moved out        ;    },    Cursor moved in    onfocusin:function (element, event) {        //Find the label that displays the error prompt and remove it for Jquery.validate.unobtrusive        var Errorelement = $ (Element). Next (' Span.field-validation-error ');        if (errorelement) {            errorelement.children (). remove ();        }    },    onkeyup:function (element, event) {    }});

If you do not use jquery.validate.unobtrusive, want to achieve the same effect in Jquery.validate, the corresponding code is as follows:

$.validator.setdefaults ({    //    onfocusout:function (Element) {this.element (Element) when the cursor is moved out        ;    },    When the cursor    is moved onfocusin:function (element, event) {        //only for jquery.validate        var errorelement = this.errorsfor ( Element);        if (errorelement) {            errorelement.remove ();        }    },    onkeyup:function (element, event) {    }});

Well, this blog post is meant to share some of the solutions that have been explored.

Original source: http://www.cnblogs.com/dudu/archive/2012/04/27/jquery_validate_unobtrusive_focusout_focusin.html

ASP. NET MVC unobtrusive JavaScript implements Onfocusout validation, Onfocusin clears errors (RPM)