ASP.NET MVC: Client Side Validation with an Ajax Loaded Form


In my last post I discussed how to perform some CRUD operations using Ajax and the jQuery UI dialog window. In that posted I included a little gem which I did not point out and probably should have.

The ASP.NET MVC framework provides client side validation using the jQuery validation library. It is a great tool for the user as they receive immediate notification when they have entered an invalid value but it is also great for the developer as you reduce unnecessary load on the server. The problem is all the client side validation logic is setup when the page is loaded so if you load a form using Ajax after the original page has been loaded, client side validation will not work for that form.

In order to remedy this all you need to do is make a manual call to the jQuery validation scripts passing in a selector that will include the form you load. Here is the line that needs to be included:


// Enable client side validation
$.validator.unobtrusive.parse('form');

Above I have indicated that I want the jQuery validation library to parse all form elements but if you form has been given an id, you can pass in the id of the form as well. Below is a more complete example from my last post that shows the form being loaded into the dialog window and then the call to the jQuery validation library.

// Load the form into the dialog div
$(dialogId).load(this.href, function () {
	$(this).dialog({
		modal: true,
		resizable: false,
		title: dialogTitle,
		buttons: {
			"Save": function () {
				// Manually submit the form
				var form = $('form', this);
				$(form).submit();
			},
			"Cancel": function () { $(this).dialog('close'); }
		}
	});

	// Enable client side validation
	$.validator.unobtrusive.parse(this);
});
About these ads

2 Responses to “ASP.NET MVC: Client Side Validation with an Ajax Loaded Form”

  1. danny Says:

    Hi Nick –

    Great series btw! Hey do you know if $.validator.unobtrusive.parse would work on a Ajax form (Ajax.BeginForm)?

    • Nick Olsen Says:

      Although I haven’t tried it, I presume it should work without any problems. The Ajax.BeginForm helper still forms an html form element just with some added data to wire up the ajax post.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 70 other followers

%d bloggers like this: