PDA

View Full Version : validate radio buttons



nikko50
Oct 28th, 2009, 04:12 PM
How do I validate that one of the below buttons is selected?


<input type="radio" name="car" class="radio" value="YES" >Yes
<input type="radio" name="car" class="radio" value="NO"> No

itsallkizza
Oct 28th, 2009, 04:48 PM
With jQuery:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[

$(function()
{
$("#myform").bind("submit",function()
{
var checked_car_radio = $("[name='car']:checked",$(this));
if (checked_car_radio.length) alert("one is checked and its value is "+checked_car_radio.val());
else alert("neither radio is checked");
return false;
});
})

// ]]>
</script>
</head>
<body>

<form id="myform" action="#">
<input type="radio" name="car" class="radio" value="YES" />Yes
<br /><input type="radio" name="car" class="radio" value="NO" />No
<br /><input type="submit" value="validate" />
</form>

</body>
</html>



Without jQuery:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
// <![CDATA[

window.onload = function()
{
document.getElementById("myform").onsubmit = function()
{
var car_radios = this.car;
var checked_car_radio;
for (var i=0;i<car_radios.length;i++)
{
if (car_radios[i].checked)
{
checked_car_radio = car_radios[i];
break;
}
}
if (checked_car_radio) alert("one is checked and its value is "+checked_car_radio.value);
else alert("neither radio is checked");
return false;
}
}

// ]]>
</script>
</head>
<body>

<form id="myform" action="#">
<input type="radio" name="car" class="radio" value="YES" />Yes
<br /><input type="radio" name="car" class="radio" value="NO" />No
<br /><input type="submit" value="validate" />
</form>

</body>
</html>

prasanthmj
Oct 29th, 2009, 06:02 AM
Use this JavaScript form validation script (http://www.javascript-coder.com/html-form/javascript-form-validation.phtml)
All that you need to add is:

<script type='text/javascript'>
var myformValidator = new Validator("myform");
myformValidator.addValidation("car","selone","Please select yes or no for car");
</script>

Old Pedant
Oct 29th, 2009, 06:14 AM
And if you want a *simple* answer:



function validate( )
{
var form = document.forms[0]; // or however you get it

if ( ! form.car[0].checked && ! form.car[1].checked )
{
alert("You must check YES or NO for the car");
return false;
}
... other validation ...
}


I wouldn't do it this way if (a) I had many sets of radio buttons on the page or (b) the given set of radio buttons had more than maybe 3 buttons. But for a case as simple as you showed, why build up a big infrastructure that you don't need??