单选按钮的 Javascript 验证不起作用

Question

Suppose i have this piece of my html code

<!--Marital Status-->
            <div class="gap">
                <table>
                    <tr class="parent">
                        <td>Martial Status:</td>
                        <td>&emsp;
                            <input type="radio" id="rad1" name="Status" value="1">
                            <label for="Single">Single</label>
                            <br>&emsp;
                            <input type="radio" id="rad2" name="Status" value="2">
                            <label for="Married">Married</label>
                        </td>
                    </tr>
                </table>
            </div>

and for the javascript

function validateForm() {
var status = document.getElementsByName("Status");
var validradio = false;
var i = 0;
  while(!validradio && i < status.length){
    if(status[i].checked) validradio = true;
    }
    i++;

  if (!validradio){
    alert("Please select your marital status");
    return false;
  }
}

when i try the validation without checking the radio button, the page become not responsive and the alert box didn't pop up as it should. But when i checked one of the checkbox, the page turn out just find. May i know, what's going on?

Answer 1

You've misaligned one statement in the javascript, change it to:

function validateForm() {
    var status = document.getElementsByName("Status");
    var validradio = false;
    var i = 0;
    while(!validradio && i < status.length){
        if(status[i].checked) validradio = true;
        i++;
    }
    if (!validradio){
        alert("Please select your marital status");
        return false;
    }
}

With i++ outside of the loop, i forever remained at value 0 .

Answer 2

This can be simplified immensly. Use querySelectorAll with an attribute selector and the :checked pseudo class and count the result

 function validateForm() { //Use an attribute selector with:checked to get the number of selected if (document.querySelectorAll("[name=Status]:checked").length < 1;) { alert("Please select your marital status"); return false; } } document.getElementById("validate").addEventListener("click", validateForm);

 <div class="gap"> <table> <tr class="parent"> <td>Martial Status:</td> <td>&emsp; <input type="radio" id="rad1" name="Status" value="1"> <label for="Single">Single</label> <br>&emsp; <input type="radio" id="rad2" name="Status" value="2"> <label for="Married">Married</label> </td> </tr> </table> </div> <button id="validate">Validate</button>