Modernizr giving a semi-false positive with Safari input attribute

[whiteInkDesign]

I’m using Modernizr/yepnope to to check if the new form input attribute ‘required’ is supported, and if it is, use the browser for client-side validation before sending it for server validation, if not load my own js validator before sending it for server validation.

The only browser that isn’t quite playing along is Safari. It detects the attribute by coloring a field red (empty) or green (complete) as expected, but when a user submits the form, Safari doesn’t a prevent an empty required field from being submitted via your typical ‘this field is required’ message. So its detecting the attribute without actually enforcing it.

Browser sniffing for Safari to launch my js is not something I want to do. Is there something else I should be checking for to launch my own validator js only if the browser doesn’t?

[Chris Coyier]

Verified. Modernizr does report `required` as working in Safari 5. That’s supposed to be the whole point of Modernizr is to detect support regardless of what the browsers “says”. E.g. it reports the date picker as not supported even though Safari does give you spinner controls. I’m not sure if there is anything they can do about this (reasonably) or not. Seems like they could insert a form onto the page with a required field and attempt to submit it and see if they get a submit event or not to test it. They can’t just test for Safari with user agent as that’s against the whole point of it. I mention that because, perfect example, Safari 5 on windows does support the attribute but Safari 5 on mac does not (I’m pretty sure).

1) search for issue and if you don’t find submit: https://github.com/Modernizr/Modernizr/issues

2) consider just using your own validation all the time — html5 forms might just not be ready for your use case yet

[whiteInkDesign]

Thanks for the info and the link, Chris. I guess sometimes compromises have to be made when working with the amazing, but unfinished, spec that is html5. Though your idea of inserting a required field and seeing if it gets a submit event or not to test for it intrigues me and I might play with that idea.

[Author]

Posts