Frank Bishop wrote:
I don't know very much yet and I'm looking to do some form validation
on 20 form fields that accept numbers. I would like to alert the user if
the combined values of any of the fields is greater than 40 (It's a
40 point survey).
Should I loop thru all the form fields when they tab out of each one
to check this (onblur)? I'm thinking it might be nice to let them know
how far over they are in the alert as well.
Code snip appreciated.
Thanks,
Frank
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">
body {
font-size: 100%;
}
input.n {
width: 50px;
font: normal 70% tahoma;
text-align: center;
}
div#readout {
width: 240px;
height: 16px;
font: normal 70% tahoma;
text-align: center;
padding: 2px;
margin-left: 40px;
border: 1px #000 solid;
background: buttonface;
}
div#warning {
visibility: hidden;
width: 240px;
height: 16px;
font: normal 70% tahoma;
color: #f00;
text-align: center;
padding: 2px;
margin-top: 10px;
margin-left: 40px;
border: 1px #000 solid;
background: #ff0;
}
</style>
<script type="text/javascript">
//<![CDATA[
function set_fields()
{
function summit()
{
var i = 0,
el,
n,
b,
sum = 0;
while (el = els.item(i++))
if (isNaN(n = Number(el.value)))
{
el.value = 'invalid';
}
else sum += n;
var t = document.createTextNode('Combined value: ');
var s = document.createTextNode(sum);
el = document.getElementById('readout');
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(t);
n = document.createElement('strong');
n.appendChild(s);
el.appendChild(n);
el = document.getElementById('warning');
if (sum > 40)
{
t = 'You have exceeded the allowed value by ' + (sum - 40) + ' !';
n = document.createTextNode(t);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(n);
el.style.visibility = 'visible';
}
else el.style.visibility = 'hidden';
}
var i = 0,
el,
els = document.getElementsByTagName('input');
while (el = els.item(i++))
if (/\bn\b/.test(el.className))
el.onchange = summit;
}
onload = set_fields;
//]]>
</script>
</head>
<body>
<form>
<ol>
<li><input id="n1" class="n" type="text" name="n1" value="" /></li>
<li><input id="n2" class="n" type="text" name="n2" value="" /></li>
<li><input id="n3" class="n" type="text" name="n3" value="" /></li>
<li><input id="n4" class="n" type="text" name="n4" value="" /></li>
<li><input id="n5" class="n" type="text" name="n5" value="" /></li>
<li><input id="n6" class="n" type="text" name="n6" value="" /></li>
<li><input id="n7" class="n" type="text" name="n7" value="" /></li>
<li><input id="n8" class="n" type="text" name="n8" value="" /></li>
<li><input id="n9" class="n" type="text" name="n9" value="" /></li>
<li><input id="n10" class="n" type="text" name="n10" value="" /></li>
<li><input id="n11" class="n" type="text" name="n11" value="" /></li>
<li><input id="n12" class="n" type="text" name="n12" value="" /></li>
<li><input id="n13" class="n" type="text" name="n13" value="" /></li>
<li><input id="n14" class="n" type="text" name="n14" value="" /></li>
<li><input id="n15" class="n" type="text" name="n15" value="" /></li>
<li><input id="n16" class="n" type="text" name="n16" value="" /></li>
<li><input id="n17" class="n" type="text" name="n17" value="" /></li>
<li><input id="n18" class="n" type="text" name="n18" value="" /></li>
<li><input id="n19" class="n" type="text" name="n19" value="" /></li>
<li><input id="n20" class="n" type="text" name="n20" value="" /></li>
</ol>
</form>
<div id="readout"></div>
<div id="warning"></div>
</body>
</html>
Just a rough approximation...
