Working on some legacy code the other day, and came across one that was driving me nuts. I had a form that was part of a tabbed interface, and the form would not submit in Firefox or Chrome. Finally, after some trial and error, I was on a specific tab when I hit submit, and saw the following:

Unable to display content. Adobe Flash is required.

Did you see that? Some kind of form validation. It was odd though, because I didn't see that popup from any other tab, nor did it shift focus to the tab with that field (though focus was on that field). So, I went searching.

After quite a bit of time I found out something even more odd. There was no form validation on that field. Zilch. Nada. What the...? Now I was really stumped.

So, I started looking at the code of the form itself, specifically at that field. Here's what I found:

view plain print about
1<input type="text" name="somefield" required="No">

Like I said, some legacy code. Have you figured it out yet? Here's the deal. This form used to be a cfform, and the original developer had added the required attribute on a cfinput (unnecessarily). At some point, the form was switched over to a standard form, with it's own validation, and the cfinput was switched quickly to an input, without removing the attribute. No big deal, right?

Well, it wasn't a big deal, for a very long time. But, the browsers are updating. They're slowly implementing changes to support html5. And, guess what. There are changes to the input elements for html5. Now you have a required attribute? It will automatically validate that field, with a default message, and stop form processing if the field is empty. Never mind that you've implemented the required attribute incorrectly for html5, it'll still validate it regardless.

Removing the required attribute, which was no longer necessary in our application, resolved the issue.

How 'bout that gotcha?

This entry was posted on November 1, 2011 at 2:03 PM and has received 759 views. There are currently 7 comments. Print this entry.