Colour radio buttons on form validation - Javascript

Question

Currently I have this:

function validateRadio(x){
if(document.getElementById(x).checked){
return true;
}else{
return false;
}
}

Heres the HTML:

<strong> Smoking Area? </strong>
<br>
Yes <input type="radio" name="hand" id="left" value="Left" onblur="validateRadio(id)"/>
No <input type="radio" name="hand" id="right" value="Right" onblur="validateRadio(id)"/>
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the smoking area.</span>
<br><br>

However I want this to show up as red if no radio button is clicked or green if once is and it passes Validation, would this be possible?

Also, I want the warning to be hidden once a radio button is clicked, currently it stays on the page. Any help would be appreciated :)

Answer 1

Not quite clear what exactly you want to paint, but if you're talking about the radio buttons themselves, I think it would be a much better idea to design your own buttons (images with on and off states) and use them instead. That way you'll be able to maintain crossbrowser consistency as well as a much nicer/custom look to your site.

However, you're talking about the text parts ("Smoking Area", "yes/no"), the easiest way would be to give their container an id, and then do something like:

function validateRadio(x){
    if(document.getElementById(x).checked){
        document.getElementById('your_container').style.color = 'green';
        return true;
    }else{
        document.getElementById('your_container').style.color = 'red';
        return false;
    }
}