验证是否选择了单选按钮组JQUERY

Question

I'm trying to validate the radio button group,. if not check the span will have a text which indicates that the radio button must be selected,. the problem is,. if I place the codes of radion button validation on top, it does not work, but when it is below,. it works.. Kinda weird,. any idea for this one? thanks

    $("#mchoice").submit(function () {

        var direction =  $('#direction').val();

        var quiztxtBox =  document.getElementsByName('quiztxtBox[]');

        var isSubmit;
        var names = [];
        var err = document.getElementsByName('errMchoice[]');


                    // For radio button answers.        
       $('input[type="radio"]').each(function(){
          names[$(this).attr('name')] = true; 
          });      

          if (!direction) 
          {
            $('#direction').focus();
            $('#direction').css({"background-color":"#f6d9d4"});
            $('#direction').nextAll('span').html('Type in direction.');
            event.preventDefault();
          }
          else
          {
            $('#direction').css({"background-color":"#fff"});
            $('#direction').nextAll('span').html("");
          }


        for(correct_answer in names)
        {
            var radio_buttons = $("input[name='" + correct_answer + "']");

            if( radio_buttons.filter(':checked').length == 0)
            {

                radio_buttons.nextAll('span').html('Select the answer.');
                event.preventDefault();
            }
           else
            {
                radio_buttons.nextAll('span').html('');
            }
        }

        // Choices fields

        $("[name='quiztxtBox[]']").each(function(){


         if (!this.value.length) 
          {
            $(this).css({"background-color":"#f6d9d4"}).siblings('span.errorMsg').text('Please type in question/answer!');

            event.preventDefault();
          }
          else
          {
            $(this).css({"background-color":"#fff"}).siblings('span.errorMsg').text("");

          }


        });   
}); 

HTML here

<div id="QuestionTBDiv1" >
                                        <label>Question</label><br/>
                                        <input type="text" name="quiztxtBox[]" size="57" id="quiztxtBox[]" placeholder="Question #1"><br/>
                                        <label>Answer</label><br/>
                                        <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice A">&nbsp;<input type="radio" class = "choiceA" name="correct_answer1" value="A">&nbsp;
                                        <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice B">&nbsp;<input type="radio" class = "choiceB" name="correct_answer1" value="B"><br/>
                                        <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice C">&nbsp;<input type="radio" class = "choiceC" name="correct_answer1" value="C">&nbsp;
                                        <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice D">&nbsp;<input type="radio" class = "choiceD" name="correct_answer1" value="D"><br>
                                        <span name="errMchoice" class="errorMsg"></span>
                                        </div>

JsFiddle: http://jsfiddle.net/Ej77L/2/

Answer 1

There was a small logical error in your javascript. Once you set the span with error message of 'Select an answer' you are doing a checking if the question has been filled. If it has been filled then you are making the span text empty.

So instead of that, keep a flag to see if the answer was selected or not. If not selected then set the flag and in later part of the code, don't empty span text

Here's a working DEMO