ASP.NET MVC: Remote Validation and jQuery to check existence of login id

Not only ASP.NET MVC supports validation through data annotation, it also supports remote validation of a property at the server side immediately. MVC can call the configured action to validate when the user has filled the property on the client side.  A common scenario would be checking existence of login id during registration. If the system can inform the user if the typed in ID is not available immediately, the usability is significantly improved.

Let us consider the following 'user' model definition -

In the above model, the LoginId property is marked with RemoteValidate attribute. The first parameter CheckLoginIdAvailability is the action name and the second parameter User is the name of the controller. The final parameter is self-explanatory. When the user fills in the login id text box, MVC will call the CheckLoginIdAvailability action method available at the UserController and passes the user entry. The method is expected to contain the logic to look into the database and if the specified login id is already in use, an error message will be displayed.

UserController implementation -

You don't have to make any changes to the view, for testing you can just scaffold and leave the default 'Create' view. The view with built-in remote validation in action - 

Yes, it's that simple. Though it works like a charm, you will notice that the model now knows about the controller, it's action and even about the Http mechanism. The domain entity starts looking polluted - in a way the separation of concern is violated. If you change the controller methods for other reasons, the domain model may required to be changed too.

An approach to overcome the above issue would be to use few jQuery scripts for validation. Let's look at implementing the same validation using jQuery.

The remote validate attribute in the model can be removed and the model looks cleaner now, as below.

The controller remains unchanged, but the view requires to be modified to include the jQuery function. First let us add a HTML element to display the validation result to the user. The new 'Status' <span> element will be used to display the remote validation result.

 Now let's write jQuery function to perform the validation at the server side.

 The jQuery function is pretty simple. It's invoked when the user enters something in the LoginId text box. The jQuery function post to the server for validation if the length of the login id is more than three characters. The validation messages can be customized easily applying HTML styles as you have complete control over the HTML rendered. In the above example, the validation message looks like below.

So, MVC provides easy way of remote validation but if it doesn't fulfill your need, you can use jQuery to fill the gap.

Happy coding...!