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

【问题标题】：Html5 form element "required" on iPad/iPhone doesn't workiPad/iPhone 上的 Html5 表单元素“必需”不起作用
【发布时间】：2012-05-19 10:29:15
【问题描述】：

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

我的代码

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

【问题讨论】：

你可以试试<input type=email class=input placeholder="Email" name="email" required /> 或<input type=email class=input placeholder="Email" name="email" required="" />。
你试过用required />代替required>吗？

标签： html forms mobile-safari required html-validation

【解决方案1】：

iOS 尚不支持：when can I use: required。

【讨论】：

对 Apple x1000 感到羞耻！自从被问到这个问题已经 3 年 6 个月零 4 天（截至这篇文章），Apple 仍然没有实施它。傲慢令人难以置信。苹果软件 2.0...
2016 年 2 月，Apple 仍然很烂。
我刚刚看到我收到了“著名问题”徽章，因为这个问题被浏览了超过 10,000 次。 Apple STILL 不支持 iOS 或 OSX 上的 html5 表单验证。这几乎令人难以置信。
2016 年 9 月，iPhone 7 发布，iOS 10 发布，但仍然无法运行。苹果干得好！
如链接所示，Safari 10.1 和 iOS 10.3（均于 27.03.2017 发布）支持所需属性。

【解决方案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.
    }
});

【讨论】：

您的解决方案很棒。如果页面上有多个表单，我将其自定义为仅验证当前表单，方法是修改第二行如下：codevar required = $('[required="true"]', this);@987654323 @

【解决方案3】：

从 iOS 10.3 开始支持此属性。电子邮件类型也需要写@符号等等......

【讨论】：

【解决方案4】：

如果您已经在使用 jQuery、Modernizr 和 yepnope，这是处理它的一种方法。如果你不是，那么这将添加很多额外的 javascript。

My solution

【讨论】：

【解决方案5】：

我猜你可以在提交之前做一些这样的操作

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

按下submit 按钮后，checkValid() 在实际提交之前被调用。 true的返回值将继续提交操作。

更多解释请参考this post。:)

【讨论】：

【解决方案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 中添加这个函数。

【讨论】：

这将在服务器端完成。 required 属性内置于浏览器中，可防止浏览器发送不完整的内容。换句话说，这个想法是为了防止 PHP（在你的情况下）需要验证它（即使你实际上应该这样做）。