HTML form "required" attribute on Mobile Safari doesn't work

Question

Mobile Safari on iPad is supposed to be HTML5-compliant, but it seems that the required attribute 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>

Did you try with `required />` instead of `required>` ? – Hidde May 19 '12 at 10:38 — Hidde, May 19 '12 at 10:38

score 25 · Accepted Answer · answered May 19 '12 at 10:48

25

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

answered May 19 '12 at 10:48

Ian Devlin

18,534
6
55
73

2

As the link shows, Safari 10.1 and iOS 10.3 (both relesed on 27.03.2017) support the required attribute. – Ian Devlin Mar 29 '17 at 07:20
1

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. – Patrice Poliquin May 04 '17 at 14:22

score 16 · Answer 2 · edited Aug 09 '23 at 19:39

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.
    }
});

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: `code`var required = $('[required="true"]', this);`code` — phpawy, Sep 20 '16 at 13:16

score 3 · Answer 3 · edited Aug 09 '23 at 19:39

3

Since iOS 10.3, this attribute is supported.

edited Aug 09 '23 at 19:39

TylerH

20,799
66
75
101

answered Mar 17 '17 at 11:03

Matouš Bečvář

31
1

score 1 · Answer 4 · edited Aug 09 '23 at 19:39

1

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 true will continue the submit action.

Refer to this post for further explanation.

edited Aug 09 '23 at 19:39

TylerH

20,799
66
75
101

answered Nov 19 '15 at 08:24

AgnesCat

11
3

score -1 · Answer 5 · answered Sep 14 '18 at 10:50

-1

If you use PHP, you can add a validation like this

function validation(){

  if(isset($_POST['submit'])){
  $email = $_POST['email'];

     if(empty($email)){
        echo $error = "Your email cannot be empty";

      } else {
        return true; //or do something next here
     }
   }

You then add this function in php before your form.

answered Sep 14 '18 at 10:50

C.Tom

1
1

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). – ldam Sep 14 '18 at 10:58

HTML form "required" attribute on Mobile Safari doesn't work

5 Answers5

Linked