html - iPad/iPhone 上的 Html5 表单元素“必需”不起作用

Question

iPad safari 应该是 html5 兼容的，但似乎所需的元素不起作用。任何人都知道为什么，或者有一个不需要大量 JavaScript 的体面的解决方法吗？

我的代码

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

Answer 1

iOS 尚不支持它：我什么时候可以使用： required。

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 开始支持此属性。电子邮件类型也需要写@符号等等......

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 中添加此函数。