h5Validate icon indicating copy to clipboard operation
h5Validate copied to clipboard

HTML5 input type email doesn't work

Open ghost opened this issue 14 years ago • 11 comments

If one sets input to type="email" it doesn't add classes "validation-error" and "h5-active".

ghost avatar Nov 08 '11 10:11 ghost

This was originally by design. The type="email" attribute setting used to cause problems with some browsers that only partially implemented the specification. The situation has since changed, and this decision needs to be re-evaluated with current browsers. I'll look into this.

ericelliott avatar Nov 08 '11 17:11 ericelliott

Which browser are you using?

ericelliott avatar Nov 08 '11 17:11 ericelliott

It is ok with IE 7, 8, 9 but it doesn't work with modern browsers FF8.0, Chrome 15 and Opera 11.52. It seems that IEs just ignore the type and that's how it works for them. Thank you Eric.

ghost avatar Nov 09 '11 09:11 ghost

I'll set up some test cases and try to figure out what's going on. Thanks for the report. I haven't looked at the new input types for a while because the browser implementations were crippled.

ericelliott avatar Nov 09 '11 15:11 ericelliott

Fixed. The validation events weren't being triggered for new input types. Events will now be triggered for all input types by default.

Keep in mind, setting type="email" will NOT automatically hook up the email validation rules, OR fall back to the native browser implementation (YET). It's currently my highest priority to write some good test cases to make sure that it's safe to fall back on native browser implementations (which should be the default behavior for validations supported by the spec).

As soon as those tests are all in place, we'll make the native implementation the default behavior, and fall back to our validation rules for browsers that don't support it.

ericelliott avatar Nov 13 '11 00:11 ericelliott

That will be the most correct approach, period! Thank you for your work, I really appreciate it.

ghost avatar Nov 14 '11 09:11 ghost

I'm quite annoyed over the bad implementation of html5 type attributes in the browsers. The email and number type is terribly unreliable cross-browser, i think it may even be better to just override that functionality all together and use javascript to validate the html5 type fields.

jquery tools validation claim to support html5 validation types, but it breaks terribly.

tmikaeld avatar Nov 14 '11 14:11 tmikaeld

This is one of the many reasons I chose not to support the new types initially, and this is why I don't simply fall back to native browser implementations when they are available. I know from experience that there are some really terrible and unexpected behaviors implemented in some browsers. They are wildly inconsistent, and the look and feel behavior in many browsers right now is simply not acceptable for app developers who want to leave a good impression with users.

Truthfully, overriding the native browser implementations is beyond the scope of h5Validate. It involves a thorough CSS reset, and each browser maker has implemented the native look and feel in different ways -- some of which you simply cannot override at all. My advice historically has been either don't use them, or be aware of the minefield you're about to cross if you do chose to use them.

So far in my apps I have shied away from the new types intentionally, and instead used the features already built into h5Validate to assign validation rules for things like email and urls. I use home-grown sliders instead of type="range". I use home-grown date widgets instead of type="date" -- the native browser implementations of that are particularly egregious.

ericelliott avatar Nov 14 '11 16:11 ericelliott

Thanks for sharing your experience, it saves me a lot of research time. Especially the range and date type, something i'm about to add to this current project i'm working on.

Do you have any recommendation on plugin to use for that? I would love to build them myself, but time is limited right now.

About overriding, yeah, i googled a bit and even that part seem really unreliable. It seems like just using H5 is the best option :-)

tmikaeld avatar Nov 14 '11 16:11 tmikaeld

Maybe I can convince the powers that be at RootMusic to let me release the slider plugin I wrote for BandPage. It's very flexible and easy to use. We use it for the track position slider, the volume slider, and the resize handle for the track list in our music player: http://listn.to/rihanna

As for the datepicker, I use home-grown solutions that I definitely can't release as open-source any time soon (they're not abstracted out as jQuery plugins). jQuery UI has one, if you don't mind using jQuery UI. As I mentioned, I don't use it, myself, but I have before, and it worked mostly OK. I find it a little bloated and inflexible for my taste, but it might be better than some random jQuery plugin.

ericelliott avatar Nov 14 '11 16:11 ericelliott

Very nice controls indeed, it would be great if you where allowed to release it.

I looked at jQuery UI's slider and datepicker but as you say, it is rather hefty download. I have Googled around a bit but have not come across anything "better".

Thanks for replying!

tmikaeld avatar Nov 14 '11 21:11 tmikaeld