Menu
I am trying to implement html5 form validation for my web app but it's not working with safari 5.0.1 , iphone3 or android2. Is the form input attribute required, pattern or anything related to validation not supported by these browsers or i am making some mistake?
It's working with mozilla, chrome and opera. If i use html5 form validation then again i need to write code as fallback. Is it a good idea to use this or the older way as jquery and plain javascript? If any one have idea please tell me.
Please check this link (i wrote some code) and try it in iphone, android or safari:
http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html
664
The Form Tag has “novalidate” Attribute This is the first and the most common reason that causes the issue. HTML5 required attribute validation doesn't work if the form has the novalidate attribute in its markup. With the presence of the attribute, the tag looks like <form action="#" novalidate> .
To ignore HTML validation, you can remove the attribute on button click using JavaScript. Uer removeAttribute() to remove an attribute from each of the matched elements.
Short Answer. Yes the standard HTML5 validation is accessible and will pass WCAG2. 1 AA, but you can do a lot better with some JavaScript.
on('click', function(event) { var isvalidate = $("#formID")[0]. checkValidity(); if (isvalidate) { event. preventDefault(); // HERE YOU CAN PUT YOUR AJAX CALL } }); }); Code described above will allow You to use basic HTML5 validation (with type and pattern matching) WITHOUT submitting form.
If you're using jQuery, you could take a look at the h5Validate plugin. This adds cross-browser support for form validations down to IE6. According to the project's website:
Regularly tested on 13 different browsers, IE6 - IE9, FireFox, Chrome, iPhone, and Android.
Implements best practices based on 1,000 user survey, several usability studies, and the behavior of millions of users in live production environments.
Supported Platforms:
Desktop: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.
Mobile: iPhone, Android, Palm WebOS
113
Firefox and Opera both support HTML 5 and in particular form validation...
I have just spent two days writing some new code only to realise IE and Safari don't yet implement HTML 5 validation...
My choice is clear, either I recode using javascript (difficult as the form are dynamically created) or tell everyone to use Firefox or Opera, else the validation is not implemented...
My choice... keep my current code and wait for the others to catch up...
Firefox and IE10 support some of it.
Opera and Chrome support all of it.
Safari supports all of it too, but form validation is disabled by default.
Update... Just come across a post that suggests Safari do not support form validation, no wonder I could not find anyway to turn it on?
23
In order to be as cross-browser friendly as possible, you should always code with the expectation that the client platforms will not have support for newer things, like HTML5 validation. So, while leveraging the capabilities of newer browsers is great and lets you give your users a much nicer experience, it is still important to remember that not everyone has the same capabilities.
That being said, any sort of validation you do in the browser (with Javascript or HTML5) is only a convenience for the user and a savings on calls back to the server. You should ALWAYS implement validation on the server because it is very easy to circumvent client-side validation. My preferred way of developing is to do the validation entirely server-side first, and then once that is solid, add in javascript--based, and then HTML5-based validation, using a "progressive development" approach to progressive enhancement.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
