...

View Full Version : Form Verification



SynnerAws
12-05-2012, 07:51 PM
Hey Everybody,

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:


<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


<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.

Thanks!

Old Pedant
12-05-2012, 08:13 PM
Ummm...


<input type="text" name="Left1.6">

but

var batName='Front';

HUH???


*********

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.

Old Pedant
12-05-2012, 08:18 PM
Ummm... this is totally bogus:


var x=parseFloat(document.forms["entry"][batName]);

You must convert the *VALUE* of the form field, not the field itself!


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.

Old Pedant
12-05-2012, 08:24 PM
Here's a suggested change. May or may not fit your needs exactly:


<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>

SynnerAws
12-05-2012, 08:56 PM
Hey OldPendant,

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?


<div id="putErrorMessageHere"><!-- This text will be populated by JavaScript?? --></div>
OR
<p id="putErrorMessageHere"><!-- Text here will be populated by JS? --></p>

Old Pedant
12-05-2012, 09:07 PM
YES! <div> or <p> or <span> or even a <b> or <i>, believe it or not.

Any element that can contain text.

SynnerAws
12-06-2012, 12:13 AM
Hey Again,

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.

Here is how my form is set up:


<div id="errMsg"><!-- Hide --></div>
<form action="submit.php" id="entry" method="post" onsubmit="return validateEntry()">
<input style="width:60px" type="text" name="Top1.5">
... etc ...


And my JavaScript is:


<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

Old Pedant
12-06-2012, 12:40 AM
Several small typos in the code. Mea culpa. But I was just typing off the top of my head.

But you introduced a *HUGE* error of your own with the line

var fld = document.getElementById("entry");

OUCH! Not even close!

**********

Now actually tested, in a limited set of <input>s.


<body>
<html>
<form action="submit.php" id="entry" method="post" onsubmit="return validateEntry()">
<input style="width:60px" type="text" name="Top1.1">
<input style="width:60px" type="text" name="Top1.2">
<input style="width:60px" type="text" name="Top1.3">
<input style="width:60px" type="text" name="Top2.1">
<input style="width:60px" type="text" name="Top2.2">
<input style="width:60px" type="text" name="Top2.3">
<input style="width:60px" type="text" name="Top3.1">
<input style="width:60px" type="text" name="Top3.2">
<input style="width:60px" type="text" name="Top3.3">
<input type="submit">
<div id="oops" style="color: red; font-weight: bold;"></div>

<script type="text/javascript">
function validateEntry()
{
var form = document.getElementById("entry");
var msg = "";

for (shelf=1; shelf <= 3; shelf++)
{
for (bat=1; bat <= 3; bat++ )
{
var batName='Top' + shelf + '.' + bat;
var fld = form[batName];

// *** NEXT LINE OPTIONAL ***
if ( fld == null ) { alert("ERROR! " + batName + " does not exist!"; return false; }

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("oops").innerHTML = msg;

// return true if no messages, else false
return ( msg == "" );
}
</script>

</body>
</html>

SynnerAws
12-06-2012, 01:32 AM
Hey,

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.

Consider this solved!

- Aws

Old Pedant
12-06-2012, 01:54 AM
It's been a long time since I put pen to Java.


Ummm...you still haven't. At least not for this page.

This is JavaSCRIPT code.

JAVA code is *completely* different. The biggest thing similar between the two languages is the first 4 letters of their names.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum