不支持的浏览器中HTML5 "required"属性的处理方式

Question

我有一个网络应用程序，经常使用HTML5的required属性。然而，Safari和IE 8/9不支持此属性。是否有一个jQuery插件可以强制非兼容浏览器的行为？

- steve0nz

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

- snorri

---

你会如何更改代码以在每次点击提交按钮时进行检查？如果字段已填写，则去除红色边框。 - Ben

Answer 2

你可以简单地进行 shim 处理...

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

- alex

---

你的代码实际上存在一个错误，因为 .filter(function() { return this.value; }) 不仅会排除所有空表单字段，而是排除所有空表单字段，这样你最终得到的是所有必填字段且有内容的字段，而不是所有必填字段缺少内容的字段。 - S.B.

@S.B. 你是对的。如果这跟你的目标不符，可以省略掉这行代码。 - alex

@alex 你不能只是省略那一行代码，然后问题就解决了。它会处理每一个“必填”字段，即使它不是空的。 - Andre Figueiredo

Answer 3

您可以使用 h5validate，它可以完全满足您的需求。

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

- Mimo

---

他们的测试代码似乎存在不少问题，而且文档缺少我们需要的一些功能，比如没有空格或符号。 - steve0nz

你只需要检查是否存在'required'属性吗？也许更好的做法是了解更多细节并相应地构建一个。 - Mimo

Answer 4

我为此编写了一个非常简单的jQuery插件。它只是使用“required”属性向表单添加客户端验证。 https://github.com/garyv/jQuery-Validation-plugin 在包含插件后，您可以在jQuery的文档准备函数中调用validate()，或者在html body的末尾调用。

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

- garyv

---

当你说2. 调用$('form').validate();时，该怎么做呢？只需在页面中添加$('form').validate();即可吗？我尝试了你的插件，但无法使其工作。 - Shairyar

我用一个例子更新了评论。我猜你在调用validate()之前要么没有包含插件，要么没有包含<form>元素。JavaScript运行非常顺序化 - 所以你必须在代码中使用它们之前先包含插件和HTML的<form>。这是HTML和JavaScript工作的基本部分。jQuery的文档就绪函数是处理这个问题的常见方法 - http://api.jquery.com/ready/ - 它的基本功能是延迟运行代码，直到网页加载完成，这样它就可以引用页面上的任何HTML内容。 - garyv

不支持IE8，那还用这个有什么意义呢？IE9及以上版本支持HTML5验证。 - ZurabWeb

实际上，在IE8中这是有效的。我最近添加了一个测试套件，并且我有一张在IE8中运行的截图。 - garyv

Answer 5

发现了一个非常多才多艺且轻量级（一旦被压缩）的引擎，可以跨浏览器使用，包括ie8！

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

- steve0nz