HTML5表单元素“需要”在iPad / iPhone不起作用(Html5 form element

2019-09-17 08:43发布

iPad的Safari浏览器应该是兼容HTML5,但似乎需要的元素不起作用。 任何人都知道为什么,或有一个体面的解决办法,不需要大量的JavaScript?

我的代码

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

Answer 1:

它不是在iOS的支持又: 我什么时候可以使用:需要 。



Answer 2:

这是一个jQuery解决这个问题,它强调的是未能在小指颜色过于输入字段。

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


Answer 3:

由于iOS的10.3这个atrributes的支持。 此外电子邮件类型需要写@符号等等...



Answer 4:

如果您已经使用jQuery,Modernizr的,和yepnope,这是对付它的方法之一。 如果你不是那么这将增加大量额外的JavaScript。

我的解决办法



Answer 5:

我想你可以做一些以前像这样的行动提交

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

按下后submit按钮, checkValid()它实际上提交之前诱发。 返回值为true会继续提交操作。

请参阅这篇文章作进一步的解释。:)



Answer 6:

如果你使用PHP,您可以添加这样的验证

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
     }
   }

然后,您可以在PHP表单前添加此功能。



文章来源: Html5 form element “required” on iPad/iPhone doesn't work