Saturday, December 31, 2011

Html5 Unobtrusive Form Validation for ASP.NET MVC

I have a project that I was able to make use of modern browsers HTML5 form validation. But I wanted to include the validation that also takes place from within aspnet mvc so there is a unified experience with the validating the form. I took the jquery.unobtrusive-validation.js and made some modifications to it to hook in to the aspnet mvc validation. It is not yet 100%, the “Required” aspnet mvc validation doesn’t seem to “trigger” unless the field is filled out, then attempted to be submitted, and then cleared again, but the default html5 “required” validation message still shows initially. Either way, I figured I would share this and maybe someone could build on it and improve it. Enjoy.

Here are some screenshots of the results.

Failed Regex Validation
image 

Failed Minimum String Length Validation
image 

Failed Remote Password Strength Validation
image

Failed Compare to Password Field Validation
image


Download from Skydrive

Html5 Unobtrusive Form Validation for ASP.NET MVC

I have a project that I was able to make use of modern browsers HTML5 form validation. But I wanted to include the validation that also takes place from within aspnet mvc so there is a unified experience with the validating the form. I took the jquery.unobtrusive-validation.js and made some modifications to it to hook in to the aspnet mvc validation. It is not yet 100%, the “Required” aspnet mvc validation doesn’t seem to “trigger” unless the field is filled out, then attempted to be submitted, and then cleared again, but the default html5 “required” validation message still shows initially. Either way, I figured I would share this and maybe someone could build on it and improve it. Enjoy.

Here are some screenshots of the results.

Failed Regex Validation
image 

Failed Minimum String Length Validation
image 

Failed Remote Password Strength Validation
image

Failed Compare to Password Field Validation
image


Download from Skydrive