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

Fiddle

注意，您可能需要取消实际的表单提交，因为您没有在任何地方发送任何数据。

Answer 3

您在转到下一个问题时附加了onclick事件，表单验证仅在提交时执行。而是将其附加到表单的onsubmit事件：

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

其他一些事情......

id等identifiers无法以数字开头，您需要在其前面添加一个字母：

radio.id = 'r' + i;

（您还需要在getElementById中的checkAnswer来电中更新

您的标签也无法正常工作。 for是JavaScript中的reserved word。遗憾的是，保留字甚至不能用作对象的点属性（如果您创建自己的对象，则可以使用括号表示法obj["for"]来设置/获取它，而不是点符号obj.for）。因此，可以通过.htmlFor：

访问DOM节点的for属性

    label.htmlFor = radio.id;

还有其他一些需要注意的事项，其中最常见的是.className访问DOM节点的class属性。

Fiddle with these fixes

HTML5＆＃34;必需＆＃34;在JavaScript中提交验证之前，属性不起作用

3 个答案: