Html5 form element "required" on iPad/iPhone doesn't work

Question

iPad safari is supposed to be html5 compliant, but it seems that the required element doesn't work. Anyone know why, or have a decent workaround that doesn't require a ton of JavaScript?

My code

<input type=email class=input placeholder="Email" name="email" required>

Solution 1

It's not supported in iOS yet: when can I use: required.

Solution 2

This is a jQuery solution to the issue, it highlights the input fields that have failed in a pinky colour too.

$('form').submit(function(){
    var required = $('[required="true"]'); // change to [required] if not using true option as part of the attribute as it is not really needed.
    var error = false;

    for(var i = 0; i <= (required.length - 1);i++)
    {
        if(required[i].value == '') // tests that each required value does not equal blank, you could put in more stringent checks here if you wish.
        {
            required[i].style.backgroundColor = 'rgb(255,155,155)';
            error = true; // if any inputs fail validation then the error variable will be set to true;     
        }
    }

    if(error) // if error is true;
    {
        return false; // stop the form from being submitted.
    }
});

Solution 3

Since iOS 10.3 this atrributes are supported. Also e-mail type require writing the @ symbol and so on...

Solution 4

If you are already using jQuery, Modernizr, and yepnope, this is one way to deal with it. If you aren't then this will add a lot of extra javascript.

My solution

Solution 5

I guess you can do something before the submit action like this

<form name="myForm" action="valid.html" onsubmit="checkValid()" method="post">
  ... ...
</form>

after pressing submit button, checkValid() is evoked before it actually submits. a return value of truewill continue the submit action.

refer to this post for further explanation.:)

View more solutions

Comments

[Gup3rSuR4c]

Shame on Apple x1000! It has been 3 years, 6 months, and 4 days (as of this post) since this was asked and Apple still hasn't implemented it. The arrogance is incredible. Applesoft 2.0...

[Arman Hayots]

February 2016th, Apple still sucks.

[SongBox]

I just saw that I have received the "famous question" badge for this question being viewed over 10,000 times. Apple STILL does not support html5 form validation on iOS or OSX. It's almost unbelievable.

[phpawy]

your solution is great. I customized it to validate current form only, if you have more than one form on the page, by modifying second line as follow: codevar required = $('[required="true"]', this);code

[mickburkejnr]

September 2016, iPhone 7 released, iOS 10 released, and still not working. Well done Apple!

[NinjaOnSafari]

Is there any statement from apple?

[Aerious]

This is Jan 2017, still not working... shame on apple :(

[GeniusDesign]

It´s the end of March 2017.. and Apple is still clueless. Are they not aware of this problem??

[Ian Devlin]

As the link shows, Safari 10.1 and iOS 10.3 (both relesed on 27.03.2017) support the required attribute.

[Patrice Poliquin]

I can confirm that as May 2017, I am working on a project with the required tag and we tested it on iPhone and it ignored it and the form posted empty data.

[ldam]

This will be done on the server side. The required attribute is built into the browser and prevent your browser from sending incomplete content. In other words, the idea is to prevent PHP (in your case) from ever needing to validate that (even though you actually should do it anyway).