HTML5「required」屬性在JavaScript中提交驗證之前無法使用

我正在做JavaScript和我必須做的測驗。我的問題是我在單選按鈕上使用HTML 5「必需屬性」。問題是，當我使用提交按鈕的onclick事件時，它忽略了必需的屬性並執行該功能來顯示新的問題/選項。所以如果單選按鈕沒有被選中，它仍然會執行onclick事件。HTML5「required」屬性在JavaScript中提交驗證之前無法使用

我喜歡它，所以必要的屬性會檢查單選按鈕是否在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/

來源

2014-02-23 Vodka_Tonic

你被允許使用jQuery ... –

是的，我能，但我寧願用純JS學習。 –

您附加了onclick事件以轉到下一個問題，表單驗證僅在提交時執行。相反，它連接到onsubmit事件的形式爲：

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

一對夫婦的其他東西......

CSS identifiers如id不能以數字開頭，你需要用一個字母前綴它：

radio.id = 'r' + i;

（你還需要在checkAnswer的getElementById電話對其進行更新）

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

label.htmlFor = radio.id;

有幾個人這樣看哪個最常見的爲，將ê.className訪問DOM節點的class屬性。

Fiddle with these fixes

來源

2014-02-23 04:38:08

WORKING

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

必須使用FORM.onsubmit

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

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

來源

2014-02-23 04:20:15

你的問題是你綁定的onClick方法提交。 onClick將觸發並處理onSubmit，這會導致它越過驗證器。嘗試改變的onclick到的onsubmit像這樣：

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

Fiddle

注意，你可能需要取消實際表單提交，因爲你沒有發送任何數據的任何地方。

來源

2014-02-23 04:20:45 Bic

HTML5「required」屬性在JavaScript中提交驗證之前無法使用

回答

相關問題