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.
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.
I'm seeing <input type=email> fields with working validation in the latest Safari..
can you make a testcase ?
In the next test i check only email type and required attribute.
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?
i isolate the case, the problem is the required attribute in safari.
this topic also verified the situation:
@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!
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).
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.
We should document this somehow.
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:
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:
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:
In most cases people are only interested in "interactive form validation"
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.
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.
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
Ok, I will work on this on upcomming weekend.
improve validation UI test fixes false positive for Safari 5.x / Issue …
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'.