Validating your data and your feelings with IE 10 and HTML 5

On a recent project I ran into an unexpected issue while testing with IE 10. The site that I was working on has out of the box ASP.Net validators and custom ASP.Net validators. When I navigated to the page that contains the validators and attempted to submit the form, multiple validators fired.

My initial thought was "what have I done now?" But, after reassuring myself that I had tested this page in multiple browsers before IE 10 and had not run into any problems, I decided to get to the bottom of why IE 10 was throwing multiple validation warnings when it should not be.

The first give away to determining the issue is that the validation warning was not using the default validation styling that I had defined in the sites CSS. In the picture above, you can see that the text box with the "Offer or Group Code" watermark has a bright red square highlight around it. This was not something I had done… so… apparently IE 10 was applying some validation of its own. As it turns out, IE 10 was attempting to apply validation according to the new HTML5 form validation standards. This is interesting because this pages DOCTYPE is specifically targeting XHTML Transitional, so I would not expect this behavior to be applied. If I can find any specifics regarding IE 10's stance on that, I'll update this post.

So now that I knew the issue was IE 10 attempting to validate according to the new HTML 5 form validation standard, the fix was easy. I simply added the "novalidate" attribute to the pages <form> tag and viola, no more multiple validation warnings. The ASP.Net validators did their job as expected, and everybody was happy!