We’re nearing completion on the request form feature validation, but I need a bug zapper.
We were so proud of ourselves early in the week. Everything was working. The functions were a nice mix of plain JS and jQuery. Feedback given to a user while they filled in the fields of a form was informative without being frustrating (finding that line proved to be tricky, but hopefully we nailed it). We though it would be a matter of some final testing and a push live.
Then I checked it in IE8. The rest of the week has been a frustrating, but informative, experience. Lessons learned:
- If you’re going to use jQuery, use it. It seemed like we should try to use plain JS when possible, but in reality, if you’re targeting as much backward compatibility as possible… Well- there was a reason jQuery was created. It smooths out the rough edges between ie, Firefox, and Chrome. It makes things just work!
- Always test in an old browser early. We’d really love to just drop support for IE8, and likely will eventually, but not like this. The checks almost work, even in IE8, but are just flawed enough to make the feature very hard to use in that browser.
- Modern, updated browsers will tolerate multiple elements with the same id tag. Older ones will not.
Point 3 was a tough one. Because the form is being generated via a php/mysql backend, we don’t know what it will look like. Therefore, all the validation checks have to be done with just a general knowledge of what the final form will look like. For example- the main issue was with checkboxes. There may be 4 required checkbox groups, and 2 non-required. We found a way around this by using a wrapper div around a checkbox group and adding a ‘required’ class tag via php if that group is marked as required in the database. Works great, but only if the wrapper div has the same id as the checkbox group. Again, not a problem for most, but IE8 did not appreciate this at all (and I know, it’s also bad practice). I think we found a way around it (by removing a possibly unnecessary id tag on a sub element), but it was not easy to find why some really odd bugs were popping up in IE8.
If I were to have a lesson #4, it would be that jQuery is quite awesome. I know it’s not the new hotness that some js frameworks are, but it’s super useful. I had a couple document.getElementsByClassName calls- they all failed in IE8. Switch it out with a jQuery dollar sign and we’re money! JQ also provides an awesome iterator function: .each(). That really helped, as again- we didn’t know how many of each type of field we would be checking. It also smooths out the ‘this’ keyword- items within the .each() function have exactly the ‘this’ you would expect them to- none of the global window ‘this’ garbage.
Hopefully next week will be a wrap up of a successful launch. Then maybe some different topics!