2012-08-30 56 views
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;   
}); 
+1

不要使用提交按钮的onclick监听器,使用窗体的onsubmit监听器。表单可以在不点击提交按钮的情况下提交。 – RobG

回答

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

感谢哥们 - 即时通过思考。在时间到了的时候会打勾这个答案。 – muudless

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 
    // ... 
    } 
} 
+0

谢谢!真的很感谢你的回答! – muudless