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 に答える