Chrome html表单对选择元素的错误验证答案

【问题标题】：Chrome html form wrong validation on select elementChrome html表单对选择元素的错误验证
【发布时间】：2014-06-12 09:45:27
【问题描述】：

Chrome 似乎没有以我期望的方式验证 <select>。如果我选择第一个选项，而 chrome 选择第二个选项，Firefox 会正确返回 false。这在 Windows 和 Linux 上都会发生。

我的 HTML

<form>
<select name="select-choice" id="select-choice" required>
  <option value="">This is just a placeholder, it should invalidate the form</option>
  <option value="choice2">Choice 2</option>
  <option value="choice3">Choice 3</option>
</select>
</form>

我的 JS

$('form').change(function(){
   $('.result').html('form is ' + this.checkValidity());
});

CodePen

Here is a code pen

【问题讨论】：

标签： javascript forms validation google-chrome html-select

【解决方案1】：

这看起来像是一个 jQuery 错误。如果是这样，这是一个功能性的香草/原生 Javascript：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <form id="theForm">
        <select name="selectChoice" id="selectChoice" required>
            <option value="">Invalidating placeholder</option>
            <option value="choice2">Choice 2</option>
            <option value="choice3">Choice 3</option>
        </select>
    </form>
    <script>
        var selectChoice = theForm.selectChoice;
        selectChoice.onchange = function() {
            if (selectChoice.value == '') alert('Invalid selection.');
            else alert('Valid selection.');
        }
    </script>
</body>
</html>

现场示例也是一个代码笔：http://codepen.io/anon/pen/hqutj?editors=100。

或者在 jQuery 中，您可能想尝试不使用函数 checkValidity()，它似乎返回 options.selectedIndex，而是检查 select 的空值。

编辑：附带说明：required 似乎是任何浏览器都不支持的属性，至少在本机 Javascript 中不支持。见http://www.w3schools.com/tags/att_select_required.asp。

【讨论】：

这行得通。仍然困扰我的是 checkValidity() 不是 jQuery，也是原生 JavaScript 和 required should work。如果没有更好的结果，我会接受这个答案。
@MirkoGuarnier - 可爱，checkValidity()。以前从未听说过它，但它会使编码变得容易得多。但是，此时，由于浏览器支持错误或不支持，它似乎在结构上存在错误。参见sanalksankar.blogspot.nl/2010/12/…，前一段。关于required：由于浏览器支持如此糟糕（没有IE8/9，也没有iOS Safari），我现在要忘记它了。太忙了。