Validation passes of unchecked radio buttons

Question

I'm trying to validate radio buttons but the valuation does not work, the next page gets loaded even if no radio button is checked. I have tried different approaches but none of them work, at one point I had pop-up window appearing, as for other messages, but next page was loaded anyway.

Here is my code: HTML:

<fieldset id="Radio">
Smoking <input type="radio" name="smoking" id="smoking1" value="Smoking">
Non-smoking <input type="radio" name="smoking" id="smoking2" value="Non-smoking">
</fieldset>

JavaScript:

var radio1 = document.getElementById("smoking1");
var radio2 = document.getElementById("smoking2");

if ((!radio1.checked) && (!radio2.checked)){
        window.alert("You must check one of the options in Smoking Preferences field!");
        reservation.radio1.focus();
        return false;

    }

I would appreciate any suggestions! Thanks!

Answer 1

reservation.radio1.focus(); 

There is no element with the name radio1 in your code sample.

add name="radio1" to both your radio buttons.

Now the focus will not work since name will return two so you need to select the first one.

reservation.radio1[0].focus();