Html5 form validation not working with iphone, android or safari

Question

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 any

Answer 1

I've hit the same issue with a job search application I'm in the process of building. The h5Validate plugin solved this exact problem. It plugins in the HTML5 validation holes for many browsers and devices:

• Desktop: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.
• Mobile: iPhone, Android, Palm WebOS

If you've ever used the jQuery validation plugin, it's very similar. Think of it as an extension for HTML5 forms.

Answer 2

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?

Answer 3

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

Answer 4

Why don't you try webshim ? I had the same problem and now everything is cool ! All you have do is downloading the library then put the js-webshim folder in your project. Include this code

<script src="js-webshim/minified/polyfiller.js"></script> 

<script> 
    webshim.activeLang('en');
    webshims.polyfill('forms');
    webshims.cfg.no$Switch = true;
</script>

I hope this will help you as well

Answer 5

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.