不受支持的浏览器上的 html5 必需属性答案

【问题标题】：html5 required attribute on non supported browsers不受支持的浏览器上的 html5 必需属性
【发布时间】：2023-03-21 02:30:02
【问题描述】：

我有一个经常使用 HTML5 required 属性的 Web 应用程序。然而 Safari 和 ie 8/9 不支持这个属性。是否有 jQuery 插件可以强制在不兼容的浏览器上执行该行为？

【问题讨论】：

标签： jquery html required

【解决方案1】：

这无需任何插件即可工作（仅限 JQuery）：

<script>

    // fix for IE < 11
    if ($("<input />").prop("required") === undefined) {
        $(document).on("submit", function(e) {
            $(this)
                    .find("input, select, textarea")
                    .filter("[required]")
                    .filter(function() { return this.value == ''; })
                    .each(function() {
                        e.preventDefault();
                        $(this).css({ "border-color":"red" });
                        alert( $(this).prev('label').html() + " is required!");
                    });
        });

    }
</script>

【讨论】：

每次点击提交时你会如何改变它来检查？如果字段已填满，则消除红色边框。

【解决方案2】：

你可以简单地填充它......

if ($("<input />").prop("required") === undefined) {
    $(document).on("submit", function(event) {
         $(this)
           .find("input, select, textarea")
           .filter("[required]")
           .filter(function() { return this.value; })
           .each(function() {
               // Handle them.
           });
    });
}

【讨论】：

您的代码实际上包含一个错误，因为.filter(function() { return this.value; }) 不会只包含空表单字段，而是会排除所有空表单字段，因此您最终会得到所有必需且具有内容的字段，而不是缺少内容的所有必填表单字段。
@S.B.你说得对。如果这不符合您的目标，请省略该行。
@alex 你不能省略那一行然后问题就解决了。它将处理每个“必填”字段，即使它不是空的。

【解决方案3】：

我为此编写了一个非常简单的 jQuery 插件。它只是使用 'required' 属性向表单添加客户端验证。

https://github.com/garyv/jQuery-Validation-plugin

包含插件后，您可以在jQuery的文档准备函数中或在html正文的末尾调用validate()。

<script>
  $(document).ready(function(){
    $('form').validate();
  });
</script>

【讨论】：

当你说 2. 调用 $('form').validate();怎么做？只需添加 $('form').validate();'页面内？我试过你的插件，但我不能让它工作
我用一个例子更新了评论。我的猜测是您试图在包含插件或
元素之前调用 validate() 。 JavaScript 是按顺序运行的——因此在代码中使用它们之前，您必须包含插件和 HTML

。这是 HTML 和 JavaScript 工作原理的基本部分。 jQuery 的文档就绪功能是处理此问题的常用方法 - api.jquery.com/ready - 它基本上所做的只是延迟运行代码直到网页加载后，以便它可以引用页面上的任何 HTML。
在IE8下不行，那用这个有什么意义呢？ IE9及以上支持HTML5验证。
实际上，这在 IE8 中确实有效。我最近添加了一个test suite，我有一个screenshot 在IE8 中运行。

【解决方案4】：

您可以使用h5validate，这正是您所需要的。

<script>
$(document).ready(function () {
  $('form').h5Validate();
});
</script>

【讨论】：

他们的测试代码似乎有很多问题，而且文档缺少一些我们需要的功能，比如没有空格或符号
您只需要检查“必需”属性吗？也许会更好地了解更多细节并相应地构建一个。

【解决方案5】：

找到了一个非常通用且轻量级（曾经被缩小）的引擎，可以跨浏览器工作，包括 ie8！

http://posabsolute.github.io/jQuery-Validation-Engine/

【讨论】：