19

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>
pedrouan
  • 12,366
  • 3
  • 56
  • 72
SongBox
  • 691
  • 2
  • 8
  • 15

6 Answers6

25

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

Ian Devlin
  • 18,092
  • 5
  • 56
  • 71
16

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.
    }
});
Dan
  • 10,381
  • 2
  • 34
  • 55
Eliot
  • 161
  • 1
  • 3
  • 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
3

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

Matouš Bečvář
  • 31
  • 1
1

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

Community
  • 1
  • 1
Jbrown
  • 677
  • 9
  • 8
1

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.:)

Community
  • 1
  • 1
AgnesCat
  • 11
  • 3
0

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.

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