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

六月ゝ 毕业季﹏ 提交于 2019-12-10 12:29:58

问题


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>

回答1:


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




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



回答3:


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




回答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




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




回答6:


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.



来源:https://stackoverflow.com/questions/10664356/html5-form-element-required-on-ipad-iphone-doesnt-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!