Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Radio validation</title><style type="text/css">
<!--
form { margin:0; } form div { text-align: left; margin: 2px; font-weight: bold; }
-->
</style><script type="text/javascript">
<!-- BEGIN HIDING
document.onclick = function(which_radio)
{ which_radio = which_radio ? which_radio : window.event;
var _radio = which_radio.target ? which_radio.target : which_radio.srcElement;
if (( _radio.name ) && ( _radio.name == 'radio1') && ( myform.text1.value == 'page1' ) && ( myform.elements[1].checked ))
/* You'll have to replace this with your own statement. In this example i will use 3 radio buttons to validate the textbox value. */
{ alert('\n' + _radio.value ); }
else if (( _radio.name ) && ( _radio.name == 'radio1') && ( myform.text1.value == 'page2' ) && ( myform.elements[2].checked ))
{ alert('\n' + _radio.value ); }
else if (( _radio.name ) && ( _radio.name == 'radio1') && ( myform.text1.value == 'page3' ) && ( myform.elements[3].checked ))
{ alert('\n' + _radio.value ); }
else { alert('\nSorry you didn\'t get the right word to pass!\nPlease try Again!'); }
} //And that's all for now! Enjoy...
// DONE HIDING -->
</script></head>
<body>
<form name="myform" action="#" onsubmit="return false;">
<div>
Guess The Word!
<input type="password" name="text1" />
<input type="radio" name="radio1" value="That was great!"> Page 1
<input type="radio" name="radio1" value="That was terrific!"> Page 2
<input type="radio" name="radio1" value="You've done well!"> Page 3
</div>
</form>
</body>
</html>
