Chrome HTML表單選擇元素上的表單驗證錯誤

Question

Chrome似乎沒有按照我期望的方式驗證<select> 。 如果我選擇第一個選項，而Firefox選擇第二個選項，則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

這是一支電筆

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

Chrome HTML表單選擇元素上的表單驗證錯誤

問題描述

1 個解決方案

解決方案1
1 已采納 2014-06-12 10:21:36

Chrome HTML表單選擇元素上的表單驗證錯誤

問題描述

1 個解決方案

解決方案1 1 已采納 2014-06-12 10:21:36

解決方案1
1 已采納 2014-06-12 10:21:36