validate checkboxes

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hi,
is there any way I can validate checkboxes so that the form won't continue
unless the boxes are checked?
Thanks
 
In your IE address bar type:

? JavaScript Checkbox Validation Scripts

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
lhaldenwang said:
Hi,
is there any way I can validate checkboxes so that the form won't
continue unless the boxes are checked?
Thanks
Click to expand...

Here is some HTML adapted from a working form.

The changes are to do what you ask - the Submit cannot occur unless all 5
are checked.

This needs to be altered so that the number 5 is not a fixed quantity, but
can be derived from the form itself. Otherwise it works fine.
 
Trevor said:
Here is some HTML adapted from a working form.

The changes are to do what you ask - the Submit cannot occur unless
all 5 are checked.

This needs to be altered so that the number 5 is not a fixed
quantity, but can be derived from the form itself. Otherwise it works
fine.
Click to expand...

I forgot the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- formtest.html -->

<head>
<title>Form Test</title>
<meta name="Author" content="Trevor Lawrence"/>
<meta http-equiv="Content-Language" content="en-au"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<!-- Internal JS -->
<script type="text/javascript">
function testform()
{ var maxbuses = 5
var no_buses = 0
with (document.form1)
{
for (i = 1 ; i <= maxbuses ; i++)
{ no_buses += (elements['Bus' + i].checked) ? 1 : 0 }
}

if (no_buses < maxbuses)
{ alert('You have selected ' + no_buses + ' buses. Please check all '
+ maxbuses + ' buses.')
return }
}
function sendform()
{
with (document.form1)
{
var body = ''
var i = elements.length , j = 0
while (i-- > 2) // drop last two elements
{
var tname = elements[j].id
var text = (elements[j].checked) ? 'Yes' : elements[j].value
if (text != 'on' && tname != 'yes' && tname != 'no')
{
body += tname + ": "
if (tname == "Comment")
body += '%0d%0a' // line break before comment text
body += text + '%0d%0a' // line break after each line
}
j += 1
} // end while
}
window.location = "mailto:[email protected]"
+ "?subject=Response%20from%20Form1"
+ "&body=" + body
}
</script>

</head>
<!-- ================================================ -->
<body onload="">

<noscript>
This site requires Javascript enabled<br />
</noscript>

<div id="maindiv" align="center">

<div style="border:1px solid #999999; width:60%;
background-color:#F2F4FA;">
<form name="form1" action="">

<div style="background-color:#DBE0F5; padding:3px; font:75% arial;">
<b>Bus Tour Survey</b>
</div>

<div style="padding:10px; font:75% Arial; text-align:left;">

Which buses do you want to see:<br>

Bus 1:<input type="checkbox" id="Bus1" />
<br/>

Bus 2:<input type="checkbox" id="Bus2" />
<br/>

Bus 3:<input type="checkbox" id="Bus3" />
<br/>

Bus 4:<input type="checkbox" id="Bus4" />
<br/>

Bus 5:<input type="checkbox" id="Bus5" />
<br/>
</p>

Enter Comment:<br/>
<textarea id="Comment" rows="10" cols="100"
style="font:100% Arial;">Enter your comment in
here</textarea><br />
</div>

<div align="center" style="background-color:#DBE0F5; padding:3px;
font:12px arial;">
<input type="button" id="submit" value=" Send "
onmouseover="testform()" onclick="sendform()" />
<input type="reset" id="reset" value=" Clear "/>
</div>

</form>
</div>

</div> <!-- end id="maindiv" -->

</body>
</html>
 
Thanks VERY much!!
Lisl

Trevor L. said:
Trevor said:
Here is some HTML adapted from a working form.

The changes are to do what you ask - the Submit cannot occur unless
all 5 are checked.

This needs to be altered so that the number 5 is not a fixed
quantity, but can be derived from the form itself. Otherwise it works
fine.
Click to expand...

I forgot the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- formtest.html -->

<head>
<title>Form Test</title>
<meta name="Author" content="Trevor Lawrence"/>
<meta http-equiv="Content-Language" content="en-au"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<!-- Internal JS -->
<script type="text/javascript">
function testform()
{ var maxbuses = 5
var no_buses = 0
with (document.form1)
{
for (i = 1 ; i <= maxbuses ; i++)
{ no_buses += (elements['Bus' + i].checked) ? 1 : 0 }
}

if (no_buses < maxbuses)
{ alert('You have selected ' + no_buses + ' buses. Please check all '
+ maxbuses + ' buses.')
return }
}
function sendform()
{
with (document.form1)
{
var body = ''
var i = elements.length , j = 0
while (i-- > 2) // drop last two elements
{
var tname = elements[j].id
var text = (elements[j].checked) ? 'Yes' : elements[j].value
if (text != 'on' && tname != 'yes' && tname != 'no')
{
body += tname + ": "
if (tname == "Comment")
body += '%0d%0a' // line break before comment text
body += text + '%0d%0a' // line break after each line
}
j += 1
} // end while
}
window.location = "mailto:[email protected]"
+ "?subject=Response%20from%20Form1"
+ "&body=" + body
}
</script>

</head>
<!-- ================================================ -->
<body onload="">

<noscript>
This site requires Javascript enabled<br />
</noscript>

<div id="maindiv" align="center">

<div style="border:1px solid #999999; width:60%;
background-color:#F2F4FA;">
<form name="form1" action="">

<div style="background-color:#DBE0F5; padding:3px; font:75% arial;">
<b>Bus Tour Survey</b>
</div>

<div style="padding:10px; font:75% Arial; text-align:left;">

Which buses do you want to see:<br>

Bus 1:<input type="checkbox" id="Bus1" />
<br/>

Bus 2:<input type="checkbox" id="Bus2" />
<br/>

Bus 3:<input type="checkbox" id="Bus3" />
<br/>

Bus 4:<input type="checkbox" id="Bus4" />
<br/>

Bus 5:<input type="checkbox" id="Bus5" />
<br/>
</p>

Enter Comment:<br/>
<textarea id="Comment" rows="10" cols="100"
style="font:100% Arial;">Enter your comment in
here</textarea><br />
</div>

<div align="center" style="background-color:#DBE0F5; padding:3px;
font:12px arial;">
<input type="button" id="submit" value=" Send "
onmouseover="testform()" onclick="sendform()" />
<input type="reset" id="reset" value=" Clear "/>
</div>

</form>
</div>

</div> <!-- end id="maindiv" -->

</body>
</html>
Click to expand...
 
Back
Top