Modernizr false positive testing require, email and placeholder on Safari #266

Closed
trustweb opened this Issue May 17, 2011 · 14 comments

Projects

None yet

5 participants

@trustweb

as you can check here in this jsfiddle example: http://jsfiddle.net/trustweb/sTSMW/

i use Modernizr to check with yepnope to check html5 features: email type, placeholder attribute and required attribute
and replace those features with a jquery script is it fails.

yepnope(
{
    test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder,
    nope : 'http://www.trustweb.it/webforms_home.js'
});

in Safari this script dosen't work, it seems to pass the test so the jquery file is not loaded but it dosen't perform the validation.

thanks for your job.

@paulirish
Modernizr member

I'm seeing <input type=email> fields with working validation in the latest Safari..

can you make a testcase ?

@trustweb

In the next test i check only email type and required attribute.
http://jsfiddle.net/trustweb/82nuH/4/

it dosen't work in the latest safari. i checked on windows7 and iphone4. In iphone safari found email field and give the right keybord layout, but the validation dosen't work while jquery alternative script is not loaded.

where i can see a working example of fields with working validation in safari?

@trustweb

i isolate the case, the problem is the required attribute in safari.

this topic also verified the situation:
http://css-tricks.com/forums/discussion/11524/modernizr-giving-a-semi-false-positive-with-safari-input-attribute/p1

@paulirish
Modernizr member

@trustweb, www.html5test.com has some different approaches for testing this...

can you tell me if they have correct results or the same false positives... thank you!

@trustweb

html5test.com says;
input type=email Yes
Minimal element support Yes
Field validation Yes

I think there is no test about required attribute for email input type.

I received this answer on stackoverflow:

The reason, why Modernizr says, that email/required attributes are supported in Safari5, is they are supported and you can use the constraint validation API (i.e. input.checkValidity(), input.validity etc.). Safari 5.0.x has no validation UI and this is the reason, why they have turned off so called interactive form validation ( = preventing submit and showing an errormessage, if validation fails).

@iGEL

I can confirm this issue. But I don't know how to fix this, imho it is a Safari bug for semi-implementing this feature.

@paulirish
Modernizr member

We should document this somehow.

@aFarkas
Modernizr member

For my webshims project, I have written a test, which detects, wether interactive form validation is supported and activated (in Chrome you can disable it in the about:flags section).

The test is not a Modernizr test and it also reveals a problem in Opera (Opera has a wrong implementation, hope it will be fixed).

this is how the test works:

  1. add form with an invalid field + a submit button to the document
  2. add listeners to the form.submit and the field invalid events
  3. trigger a click event on the submit button

If a invalid event appears interactive form validation is supported and if a submit event appears, it is not.

Due to the fact, that browser implementations are really different here, you have to test this feature detection script in the following browsers:

  • at least one well supporting browser (current FF or Chrome)
  • Opera 11.6 (submit event fires followed by invalid event)
  • Safari 5.0.2 (invalid fires, but if prevented submit is fired too)
  • Safari 5.0.3 (don't know exact behavior, anymore)
  • Safari 5.1/Chrome with disabled form validation (invalid is not fired, submit is fired)

If you guys want, I can extend the following test: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/forms-validation.js

From a total feature-detection view, the tests should be:

  • form validation api
  • interactive form validation
  • right form validation (event) order

In most cases people are only interested in "interactive form validation"

@paulirish
Modernizr member
@evansharp

bump. I just want a notification when this moves forward.

@aFarkas I like your Modernizr validation API test! Extending it to check behaviour too would be an outstanding addition to Modernizr. If I had as good a handle on the APIs of so many browsers the way you seem to, I'd be on it today!

@paulirish If the extension is bomber, could we see this rolled into the Modernizr 2.6 builder? Modernizr.required is a Pinto next to the Cadi of what @aFarkas is describing :)

Thanks very much to both of you.

@aFarkas
Modernizr member

@evansharp

I need to do some tests and some code cleanup for this. Because of the size of this test, I would suggest, that we add this to the extension folder and simply just document, what the required/pattern check tests and when to use this extension.

I have a lot to do, so I can only work on this from 3. March.

@paulirish
Modernizr member

I don't have time to commit to this one anytime soon so I can only rely on what other people can provide.

I agree with alex's proposal on how this is intergrated into the project

@aFarkas
Modernizr member

Ok, I will work on this on upcomming weekend.

@aFarkas
Modernizr member

Just added the new cleaned up and x-browser tested feature detection. The main test is called 'formvalidation' ->

Modernizr.formvalidation || or .formvalidation / .no-formvalidation

Additionally there are some extra Modernizr flags (no classes) called: 'formvalidationapi', 'formvalidationmessage' and 'buggyinteractivevalidation'.

@aFarkas aFarkas closed this Mar 4, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment