sbenham@gmail.com (sman) wrote in message news:<5244f4d.0409170957.7869e93@posting.google.co m>...[color=blue]
> Hi, I recently read this article on About.com on how to create
> required fields for a form:
>
http://javascript.about.com/library/...rmvalidate.htm
>
> Everything works great except that there are no instructions on how to
> make checkboxes and radio buttons required. I've tried adding these to
> my form, but I'm having no luck. Anyone know how to add radio buttons
> and checkboxes using the existing code mentioned on the url?
>[/color]
The functions in blformvalidate.htm validate text fields. The
included functions are not much help for check boxes nor radio
buttons.
I have created an example html file that works with check boxes and
radio buttons.
Robert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Check form fields</title>
<style type="text/css">
/* Skip displaying a bullet with a list item. */
#mailto li {
list-style: none;
}
</style>
<script type="text/javascript">
function validate(x)
{
var myMail;
var myAddress = x.elements["theAddress"].value;
// Check if the user wishes to cancel the submit.
if (myAddress.indexOf("*") >= 0)
{
alert(
"What a suprise! Please correct " +
"the error in your ways." +
" Please remove the asterisk ( * ) " +
"in the name field.");
/* Returning false will cancel the submit when
returned to the onsubmit event handler. */
return false;
}
// Find whick radio button was clicked.
var myType = findValue(x.addressType);
if (myType == null)
{
alert("You need to click on home, business, or vaction.");
return false;
}
if (myAddress == "" )
{
alert("Please fill in an address");
return false;
}
if (x.localMail.checked == true)
{
myLocalMail = x.localMail.value;
}
else
{
myLocalMail = "please do not send local junk mail";
}
if (x.nationalMail.checked == true)
{
myNationalMail = x.nationalMail.value;
}
else
{
myNationalMail = "please do not send national junk mail";
}
alert("Address type is " + myType + ",\n" +
"address is " + myAddress + ",\n" +
"receiving local mail is " + myLocalMail + ",\n" +
"and receiving national mail is " +
myNationalMail + ".");
return true;
}
// See which radio button is selected and return its value
function findValue(obj)
{
var i, theValue;
theValue = null; // null is return if no radio button
// was clicked.
/* Radio buttons with the same name form an array. The button
which is pressed will have the checked variable set to true. */
for (i=0;i<obj.length;i++)
{
if (obj[i].checked == true)
{
theValue = obj[i].value;
break;
}
}
return theValue;
}
</script>
</head>
<body>
<p>
The JavaScript in this html file shows how to determine which
radio button is selected, how to cancel a submit, and find the
value of a checked box.</p>
<p>
To cancel the submit, place an asterisk ( * ) in the address field.
</p>
<form name="myForm"
action="http://www.natAValidWebAddress.com"
method="POST"
onsubmit="return validate(document.forms['myForm']);">
<p>How would you describe the address?
<ul id="mailto">
<li>
<INPUT TYPE="radio" NAME="addressType" VALUE="home">Home
</li>
<li>
<INPUT TYPE="radio" NAME="addressType" VALUE="business">Business
</li>
<li>
<INPUT TYPE="radio" NAME="addressType" VALUE="vacation">Vacation
</li>
</ul>
</p>
<p>Address:
<input type="text" name="theAddress" size="40"></p>
<p>
Do you wish to receive local junk mail?
<INPUT TYPE="checkbox"
NAME="localMail"
VALUE="recieve local mail">
</p>
<p>
Do you wish to receive national junk mail?
<INPUT TYPE="checkbox"
NAME="nationalMail"
VALUE="recieve national mail">
</p>
<br>
<input type="submit" value="Submit address information">
</form>
</body>
</html>
