Playing with JQuery Validation Library, Part 2
Background: JQuery Validator is JQuery plug-in for validating html form fields. Microsoft has included the JQuery Validator as part of Microsoft?s new CDN, and it looks like JQuery and JQuery Validator will both be included with Asp.Net MVC 2. You can find Part 1 here.
From where we left off, the next thing to do is validate a field via a web service.
There are actually two ways of validating fields via an ajax call. The first one I?ll show it the built in way. The second is more of a hack, but gives a good background on what is actually going on with the JQuery Validator.
So in part 1 we showed how to do simple validations of a form. We will start with a simpler form for this example:
Obviously the form can be more complex, but I like starting simple.
The JQuery Validation script should look something like this:
That script will make sure there is something in userNameEdit. But now we want to make sure the user name is unique in the system. So to start, I need a web service to call. For this example, I?m using Asp.Net MVC.
OK, a few things about the web service above. 1. in the current implementation, all user names are valid. That is the Json(true). If you want to see the failure case, change it to Json(false). 2. look at the method parameter. It is the same name as the form field. That is a convention in the JQuery Validator, and near as I can tell you cannot override that behavior. Third: JsonResult stipulates that the method will return its data in the Json format. Unlike other web method types, where the output type come from the caller, this one only returns the specified format.
Validation Method 1: remote
Now, lets modify our script from above to call that web method:
The new part is the remote in the script. You give it the name/location of your web service to call to validate the field, and the field name/value are passed in.
Now about the Url.Action bit in there?If you are not used to Asp.Net MVC, that line will look strange to you. Here is how I understand it: Url.Action is a method that utilizes the Asp.Net Routing engine to create urls. In the case of MVC, I need a url to a controller method. The controller is ?Account? (the actual class name is AccountController), and the method is ?VerifyUserName?. The cool part, now you can get a valid url no matter where you are in the project directory hierarchy (that is a problem with WebForms).
But there are downsides: I hope the only data you are going to pass to the method is the data located in the control. If you need to pass more information to do the validation you could be in trouble.
Validation Method 2: Validator.addRule
The next option is to add a custom rule that make the ajax call and does the validation. So first we add the custom rule:
The only thing interesting in that ajax call (as far as JQuery is concerned) is the async = false bit. That line is telling JQuery to execute this method serially so I can return the result (hope the method doesn?t take too long). But I can customize the AJAX call however I need.
Next, we can edit our ?validate? method to use the custom rule.
So what I did here was take the code from the Validator?s Remote method, and modify the parts I needed for my own purposes. That said, I had a lot of trouble getting it to work correctly. I?m sort of hoping someone will tell me what I did wrong actually.
Validation Method 3: Overloaded Submit
The final way I?m going to show to use an AJAX web method to perform a validation check for use is by overloading the submit callback. This what I?ve actually ended up using for a number of projects. It is the simplest to code and understand.
A couple of key points on this one as well. First notice what is happening on line 2. I?m saving the resulting validator so I can use it later. Then action happens at line 17 with the submitHandler. submitHandler is a callback (event) which gives you a hook into the normal submit process. Also you can see on line 26 I am calling the form.submit myself. Then on line 28 I am displaying a custom error message.
Finally, no matter how much checking you do in the client, you still have to recheck everything once you are on the server ? sorry it is true. Until I find a better way to implement Method 2, I will be using Method 3. It is the most straight forward way to do validation via AJAX methods I have found so far.
If I can get to a Part 3 (Part 2 took WAY too long), I?ll look into using AJAX to handle the submit, and displaying custom error messages when the submit goes wrong.