在JavaScript中提交驗證之前，HTML5“required”屬性不起作用

Question

我正在用JavaScript做作業，我必須做一個測驗。 我的問題是我在單選按鈕上使用HTML 5“必需屬性”。 問題是當我為提交按鈕使用onclick事件時，它會忽略所需的屬性並執行該功能以顯示新的問題/選項。 因此，如果未選擇單選按鈕，它仍會執行onclick事件。

我喜歡它所以必需的屬性檢查是否在onclick事件之前檢查了單選按鈕。

我只是不確定如何做到這一點。

我像這樣顯示我的單選按鈕

  var radio = document.createElement("input");
    radio.type = "radio";
    radio.id = i;
    radio.value = i;
    radio.name = "option";
    radio.required = true;

這是我的JsFiddle： http ： //jsfiddle.net/VodkaTonic/4FJmU/

Answer 1

工作

http://jsfiddle.net/rnrlabs/4FJmU/3/

你必須使用FORM.onsubmit

/*nextButton.onsubmit = function() {
      checkAnswer(currentQuestion);
}*/

quiz.onsubmit = function() {
      checkAnswer(currentQuestion);
      return false;
}

Answer 2

您的問題是您將onClick方法綁定到提交。 onClick將在onSubmit之前觸發並處理，從而導致它越過驗證器。 嘗試將onclick更改為onsubmit，如下所示：

nextButton.onsubmit = function() {
    checkAnswer(currentQuestion);
}

小提琴

請注意，您可能需要取消實際的表單提交，因為您不會在任何地方發送任何數據。

Answer 3

您附加了onclick事件以轉到下一個問題，表單驗證僅在提交時執行。 而是將它附加到表單的onsubmit事件：

quiz.onsubmit = function(e) {
    e.preventDefault();
    checkAnswer(currentQuestion);
}

其他幾件事......

諸如id CSS 標識符不能以數字開頭，您需要在其前面添加一個字母：

radio.id = 'r' + i;

（你還需要在checkAnswer中的getElementById調用中更新它們）

您的標簽也無法正常工作。 for是JavaScript中的保留字 。 不幸的是，保留字甚至不能用作對象的點屬性（如果你正在創建自己的對象，你可以使用括號符號obj["for"]來設置/獲取它，而不是點符號obj.for ）。 因此，DOM節點的for屬性可通過.htmlFor訪問：

    label.htmlFor = radio.id;

還有其他一些需要注意的，其中最常見的是.className來訪問DOM節點的class屬性。

擺弄這些修復