This tutorial is related to the last one in that it has to do with validation on a registration request form. In the last post, CompareAttribute in ASP.NET MVC 3 - Compare Properties During Validation, I talked about validating that password and confirm password are equal using the new CompareAttribute in ASP.NET MVC 3. In this tutorial I will show you how to use remote validation in ASP.NET MVC 3 to let the user know if the username chosen during registration already exists using client-side validation.
Remote Validation in ASP.NET MVC 3
In this example we will be validating if a username provided by the user is unique during registration. Using the same example as in the past tutorial, here is a look at part of the RegisterRequest Class that is used during registration. Notice the Remote Attribute on the Username property. This signifies we want remote validation on this property and I have provided 3 parameters:
- UsernameExists - the name of the action that will be called on my controller
- Account - the name of the controller with the UsernameExists action
- The error message I want displayed on the client if validation fails
In addition to the Remote Attribute, we also need to create the controller action. Here is an example of UsernameExists on the Account Controller. You will obviously need to check your repository to see if the username exists. For simplicity I am just checking to see if the username provided equals “test”, and if so, returning false to tell the client that validation has failed.
Since we are using JSON and I accepted the default of HTTP GET for remote validation, I also have to say that GET is an allowed behavior with JSON. If you want a POST to occur during remote validation, you can do so by setting HttpMethod = “POST” within the Remote Attribute.
The view for this is very basic as I am taking advantage of the built-in templating by ASP.NET MVC 3. Here is the view using the new Razor View Engine.
The end result is what you would expect. When a user chooses “test” for the username a validation request is fired to the server and an error is displayed with the error message we provided with the attribute.
If you look at the source you will see the HTML 5 data-* attributes used for private storage of information controlling the remote validation. In this case you will see:
- data-val-remote="Username already exists"
- data-val-remote-additionalfields="*.Username"
- data-val-remote-url="/Account/UsernameExists"
- data-val-remote-type="POST" ( if using POST )
If you are having problems with this, make sure you have client validation enabled as well an unobtrusive JavaScript enabled. I usually set them in the AppSettings, but there are HtmlHelpers you could use as well:
You will also need to make sure you have the following JavaScript files linked in your layout or master page:
- jquery-1.4.4.min.js
- jquery.validate.min.js
- jquery.validate.unobtrusive.min.js
Failure to enable the proper settings or link the proper JavaScript files will cause nothing to happen, filling your hours with all kinds of grief as to what could be the problem.
Conclusion
ASP.NET MVC 3 has excellent support for validation. Remote Validation is exremely simple and a worthwhile feature to provide in your web applications. Check out the previous tutorial on CompareAttribute in ASP.NET MVC 3 to get a feel for the whole registration requst process.
Hope this helps.