I'm trying to make a simple form verification routine in JavaScript and it's not working exactly like I want. I have a large form, named "entry" with many input boxes, and I want to check that the entries in the boxes are numbers and that they're reasonable numbers (in this case, any number between ~9 and ~15 is reasonable). I have my form set up like:
Code:
<form action="submit.php" name="entry" method="post" onsubmit="return validateEntry()">
...
<input type="text" name="Left1.6">
... many more input boxes Left1.1 to Left5.10 ...
Then I have my validation script like
Code:
<script>
function validateEntry(){
for (shelf=1;shelf<6;shelf++)
{
for (bat=1;bat<11;bat++)
{
var batName='Front';
batName.concat(shelf.toString());
batName.concat('.');
batName.concat(bat.toString());
var x=parseFloat(document.forms["entry"][batName]);
if (x==null || x<9 || x>15)
{
var msg='It looks like you screwed up a value!\n';
msg = msg + 'Check out ';
msg = msg + batName + '!!';
alert(msg);
return false;
}
}
}
return true;
}
</script>
Unfortunately, this script seems very hit-or-miss. Sometimes it catches errors and other times it doesn't. What's more is that even if it catches an error, it doesn't alert() me where the error is -- you can see I've tried to implement this by concatenating the problemed text box's name onto the alert() string.
Any ideas as for how to make my script more robust? I've been out of the coding game for quite a while now, and out of the JS game for longer. Please excuse my awful syntax.
By the by, named forms are considered very obsolete. You should give the <form> and id instead and then use document.getElementById( ) to get the reference to it.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Last edited by Old Pedant; 12-05-2012 at 08:15 PM..
var x=parseFloat(document.forms["entry"][batName]);
You must convert the *VALUE* of the form field, not the field itself!
Code:
var x=parseFloat(document.forms["entry"][batName].value );
But see next message.
********
If you do parseFloat("zamboni") you will *NOT* get null (or any numerical value). You *WILL* get NaN which needs to be tested with the isNaN( ) function.
Also, alert( ) is NOT the right way to give error messages. Some current browsers (and more to come) allow the user to turn off alert messages.
You really need to put your error messages someplace on the page itself.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Last edited by Old Pedant; 12-05-2012 at 08:28 PM..
Here's a suggested change. May or may not fit your needs exactly:
Code:
<script type="text/javascript">
function validateEntry()
{
var form = document.getElementById("...id of your form...);
var msg = "";
for (shelf=1;shelf<6;shelf++)
{
for (bat=1;bat<11;bat++)
{
var batName='Front' + shelf + '.' + bat;
var fld = forrm[batName];
var fld.style.backgroundColor = "transparent"; // assume valid
var x = Number( form[batName].value );
if ( fld.value == "" || isNaN(x) || x<9 || x>15)
{
fld.style.backgroundColor = "pink"; // indicate field in error
msg += batname + " is not a valid number between 9 and 15<br/>"
}
}
}
// clear or set message in place:
document.getElementById("putErrorMessageHere").innerHTML = msg;
// return true if no messages, else false
return ( msg == "" );
}
</script>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Last edited by Old Pedant; 12-05-2012 at 08:26 PM..
First off, thanks for the replies. You are awesome.
As for the bankName not being equal to the input name, that was a copy-paste error. Sorry -- the pages are generated dynaically with a PHP backend and I had copy-pasted code from two differently generated pages. I assure you that when the input-box's name is "LeftX.Y", the javascript section starts with bankName='Left'. Sorry about that.
isNaN looks like exactly what I was looking for. I should've guessed that, sorry.
I will try to drop your JS in when I have a moment. It *looks* like it's exactly what I want, though. Quick question: The "putErrorMessageHere" element can be anything? A <p> or a <div>, for example?
Code:
<div id="putErrorMessageHere"><!-- This text will be populated by JavaScript?? --></div>
OR
<p id="putErrorMessageHere"><!-- Text here will be populated by JS? --></p>
I've gone ahead and tested the JavaScript you suggested and it seems to be completely non-functional. I am actually quite confused by this because it seems correct, to me.
<script type="text/javascript">
function validateEntry(){
msg="";
for (var shelf=1;shelf<6;shelf++)
{
for (var bat=1;bat<11;bat++)
{
var batName='Top' + shelf + '.' + bat;
var fld = document.getElementById("entry");
var x=Number( fld[batName].value )
fld.style.backgroundColor="transparent";
if (fld.value == "" || isNaN(x) || x<9 || x>15)
{
fld.style.backgroundColor="pink";
msg += batName + " is not a valid voltage!<br>
"
}
}
}
document.getElementById("errMsg").innerHTML=msg;
return ( msg == "" );
}</script>
When I leave the entire form blank, I am still allowed to submit. Correct me if I'm wrong, but this JS should *stop* the form submission if validateEntry returns false, correct?
Thanks again,
Aws
Last edited by SynnerAws; 12-06-2012 at 12:15 AM..
Alright! Yea -- turns out many of my errors were typos. As a matter of fact, a missed semicolon took the whole script from working like a dream to a nightmare. Anyway, everything seems to be working perfectly, now. Thanks so much for the help; It's been a long time since I put pen to Java.
Before you post, read our: 
Form Verification
