如何验证单选按钮？

Question

I am trying to validate a set of radiobuttons that output a message upon submit informing the user that they must make a selection before they continue. The code below never recognises that the buttons are checked and always outputs the alert message. How would I adapt this code to make it work?

Radiobuttons:

<input type="radio" name="examtype" value="GCSE"onclick="return confirmation();"/>GCSE

<input type="radio" name="examtype" value="AS" onclick="return confirmation();"/> AS

<input type="radio" name="examtype" value="A2" onclick="return confirmation();"/> A2 </td> </tr>

Function for confirmation onclick:

function confirmation() {

    for (var i=0; i < document.ExamEntry.examtype.length; i++)
       {
       if (document.ExamEntry.examtype[i].checked)
          {
            var answer = confirm(document.ExamEntry.examtype[i].value)

        if (answer){
            document.ExamEntry.examtype[i].checked = true;

        }
        else{
            document.ExamEntry.examtype[i].checked = false;


        }
          }
     }

    }

Code currently being used for rejecting unselected radiobuttons:

if (document.ExamEntry.examtype.checked){
      alert('checked') //for testing if statement runs when appropriate//
} 

else {
msg+="You must enter the exam type \n";
result = false;
}

Answer 1

Here's an example code on how to validate radioboxes: http://jsfiddle.net/jyUAM/3/

<script type="text/javascript">
function validateRadioboxesByName(form, name)
{
    var el = form[name];
    for (i = 0; i < el.length; ++i) {
        if (el[i].checked)
            return true;
    }

    return false;
}

function checkRegistration() {
    var isValid = validateRadioboxesByName(document.forms.test, "examtype");

    if (!isValid)
        alert("Please check one of the radiobox.");

    return isValid;
}
</script>

<form name="test" onsubmit="return checkRegistration()">
    <input type="radio" name="examtype" value="GCSE"/>GCSE

    <input type="radio" name="examtype" value="AS"/> AS

    <input type="radio" name="examtype" value="A2"/> A2

    <button type="submit">Send</button>
</form>

This way you don't need to remember the state of a clicked radiobox, but just ask the browser when you need the data, that is, before submitting the data.

This tutorial may give you more ideas on how to visualize the message to the user instead of using an ugly alert call: http://www.the-art-of-web.com/html/html5-checkbox-required/

That the examples on the last link are for checkboxes shouldn't scare you, you can easily apply the same to radio- input-boxes and the like.

Answer 2

Try setting a variable as false outside both functions, and then if the confirmation function runs, assign that variable to true.

Then in your next function where you check if the user have clicked a radio button or not, use an if statement that runs only if the variable has been set to false which could include your alert message.

Hope this helps :)