Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 589
SongBox Avatar asked May 19 '12 10:05

SongBox


3 Answers

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

like image 105
Ian Devlin Avatar answered Sep 19 '22 19:09

Ian Devlin


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.
    }
});
like image 16
Eliot Avatar answered Sep 18 '22 19:09

Eliot


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

like image 3
Matouš Bečvář Avatar answered Sep 21 '22 19:09

Matouš Bečvář