Thursday, 7 February 2013

Cross Browser Testing with Safari

I've been trying to debug a captive portal that implements HTML5 form validation, and I've come across one doozey of an issue with guess which browser!

That's right, Safari! (You thought I was going to say Internet Explorer didn't you!)

Turns out that the native HTML5 validation is fully supported in Safari, but for some reason unbeknownst to me, it chooses not to implement it.
"Even though Safari supports the constraint validation API, as of this writing (version 6), Safari will not prevent submission of a form with constraint validation issues. To the user Safari will behave no differently than a browser that doesn't support constraint validation at all. "                                              http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

 The solution to the issue is of course to enable validation through JavaScript, the choice in this instance was to implement the jQuery validation plugin written by Jorn Zaefferer available here.

There's a common theme when it comes to cross browser testing, but the idea is not to cater for browsers individually but to cater for features or capabilities. For example earlier versions Internet Explorer may not have the canvas API available, so for a page where you want to use it you would check first that the canvas API exists not that the user is using an old version of IE. Makes sense huh?

This is the rule I had to break, since for no good reason Safari allows the checkValidity function, but doesn't implement it natively. So! Onwards to browser checking! Fortunately the page utilises jQuery, so the solution is pretty simple: " $.browser.safari ", but nope that's deprecated since both Safari and Chrome use the WebKit engine and should implement the same standards. So as elegant as this is I had combined it with the " window.chrome " property which only exists in Google Chrome.

Problem solved! Safari trips the condition, jQuery validation plugin kicks in and the user is prevented from submitting the empty form!

Great stuff.