sb*****@gmail.com (sman) wrote in message news:<52************************@posting.google.co m>...
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?
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>
