1

我有一个简单的多题表格，每个问题有 4 个答案，用户必须为每个问题选择 1 个答案。

到目前为止，我可以检查未回答的问题并显示错误消息。

但是现在，如果所有问题都已得到解答，我需要表格进入结果页面（我假设window.location？）

如何检查是否所有问题都已回答？

$('.submit-button').click(function(event){
    $('.validate-message').hide();

    for (var i=1;i<6;i++) {
        var input = $("input[name=q"+i+"]");
        var inputChecked = $("input[name=q"+i+"]:checked");

        if (!inputChecked.val()) { //if an answer is not selected for a question
            $(input).parents('fieldset').append('<div class="validate-message" style="color:red;">Please choose an answer!</div>');

        } else { // if an answer is selected for a question
        }
    }       
    return false;          
});
4

2 回答 2

1

只需使用一个布尔变量：

$('.submit-button').click(function(event){
    var noErrors = true;  // default to no errors

    $('.validate-message').hide();

    for (var i=1;i<6;i++) {
        var input = $("input[name=q"+i+"]");
        var inputChecked = $("input[name=q"+i+"]:checked");

        if (!inputChecked.val()) { //if an answer is not selected for a question
            noErrors = false;  // an error was found, set noErrors to false
            $(input).parents('fieldset').append('<div class="validate-message" style="color:red;">Please choose an answer!</div>');

        } else { // if an answer is selected for a question
        }
    }       

    if(noErrors) // do stuff

    return false;          
});
于 2012-08-30T02:57:25.383 回答
0

出于兴趣，这是一个简单的 javascript 解决方案。

假设 HTML 如下所示：

<form id="f0" onsubmit="return validateForm(this);">
  <div>
    <p>Question 1.<br>
      A<input type="radio" value="A" name="q1"><br>
      B<input type="radio" value="B" name="q1"><br>
      C<input type="radio" value="C" name="q1"><br>
      D<input type="radio" value="D" name="q1"><br>
    </p>
    <p>Question 2.<br>
      A<input type="radio" value="A" name="q2"><br>
      B<input type="radio" value="B" name="q2"><br>
      C<input type="radio" value="C" name="q2"><br>
      D<input type="radio" value="D" name="q2"><br>
    </p>
    <input type="reset"  value="Clear answers">
    <input type="submit" value="Submit answers">
  </div>
</form>

验证每个问题是否已得到回答的功能是：

function validateForm(form) {

  var control, controls = form.elements;
  var visited = {};
  var name, radios;

  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];
    name = control.name;

    if (control.type == 'radio' && name && !visited.hasOwnProperty(name)) {
      visited[name] = false;
      radios = form[name];

      for (j=0, jLen=radios.length; j<jLen; j++) {
        visited[name] = visited[name] || radios[j].checked;
      }

      if (!visited[name]) {
        // Question hasn't been answered, cancel submit and do whatever
        alert('There are unanswered questions for ' + name);
        return false;
      }
    }
    // Validation for other controls
    // ...
  }
}
于 2012-08-30T04:04:23.917 回答