[Javascript] Loop problem
David T. Lovering
dlovering at gazos.com
Tue Mar 18 14:33:31 CST 2003
Quite true. The 'best' way (there are a lot of 'best' ways) to beat this problem is
to back-end the submit, and replace the submit button with one that merely points to
the checkForm function. Modify the checkForm function to do a submit of the form if
and only if all the fields validate, or else bail. Of course, you need to remove
the onSubmit call in the <form> declaration. To wit:
<html>
<head>
<title>myValidationMethod</title>
<script language='JavaScript'>
<!--
function checkForm() {
var msg = '';
for (var i=0; i<document.myForm.elements.length; i++) {
if (document.myForm.elements[i].value == '') {
msg += '\n\tfield \'' + document.myForm.elements[i].name + '\' is empty!';
}
}
if (msg.length > 0) {
alert('Hey stupid,\n' + msg); // preface summary of errors with put-down impugning intelligence
return false; // probably useless, but it is good practice
}
document.myForm.submit();
return true; // this doesn't go anywhere, I just included it for correctness
}
// -->
<script>
</head>
<body>
<form name='myForm'>
<table align='center' cellpadding=2 cellspacing=0>
<tr>
<td align='right' valign='middle'>Name</td>
<td align='left' valign='middle'><input type='text' size=30 name='myName'></td>
</tr>
<tr>
<td align='right' valign='middle'>Rank</td>
<td align='left' valign='middle'><input type='text' size=30 name='myRank'></td>
</tr>
<tr>
<td align='right' valign='middle'>Serial Number</td>
<td align='left' valign='middle'><input type='text' size=30 name='mySerialNumber'></td>
</tr>
<tr>
<td colspan=2 align='center'>
<input type='button' name='myButton' value='Submit Query' onClick='checkForm()'>
</td>
</tr>
</table>
</form>
</body>
</html>
This script is 'cooler' than the others we've discussed by virtue of the fact that the appearance
conforms to our expectations, i.e; "Submit Query" doesn't actually submit the form to the server unless
(!!!) all the fields have validated correctly first. I don't know which of the W3C standards guys
dropped the ball on this one, but they/he should have been vigorously flogged. [Yes, I know I pulled
fast and loose with the cross-platform issues, and the naked 'form' declaration is vile, but hey,
it works!]
Also, if you run it on a Netscape/Mozilla browser, the nice indentations will all turn into nasty little
white 'shims' all over your page. If looks are important to you, squash all the <tr><td> stuff together into an
unreadable blob with no line-feeds or blank lines and the shims will go away.
-- Dave Lovering
Chris Tifer wrote:
>
> One more small thing:
>
> > <form name='myForm' action='javascript:void(null)'
> onSubmit='checkForm(document.myForm)'>
>
> If you don't "return" that value in the onSubmit, it doesn't matter if you
> return true or false from the function. That form is going to get submitted.
>
> Chris Tifer
> http://www.emailajoke.com
>
> ----- Original Message -----
> From: "David T. Lovering" <dlovering at gazos.com>
> To: <javascript at LaTech.edu>
> Sent: Tuesday, March 18, 2003 1:20 PM
> Subject: Re: [Javascript] Loop problem
>
> >
> > Ah ha! I smell an 'onSubmit' problem:
> >
> > You need to modify your original form declaration to include an
> 'onSubmit' equivalence which points
> > to your checking routine (which can be substantially shortened, BTW), i.e;
> >
> > <form name='myForm' action='javascript:void(null)'
> onSubmit='checkForm(document.myForm)'>
> >
> > If you combine all the helpful hints together, checkForm can be reduced
> to
> >
> > <script language='JavaScript'>
> > <!--
> > var form1;
> > function checkForm(form1) {
> > if (!form) { return false; }
> > if (form == '') { return false; } // throat-scratch
> protection against bogus form
> > if (!document.forms[form1].elements) { return false; }// cure for
> empty form syndrome
> > var Numfrm = document.forms[form1].elements.length; // notice that
> since 'form1' is a var I don't use ""
> > for (var i=0; i<Numfrm; i++) {
> > if (document.forms[form1].element[i].length == 0) { return
> false; }
> > }
> > return true;
> > }
> > // -->
> > </script>
> >
> > Notice how 'checkName' got squished into one line of code. Rule of
> thumb: if you are doing something
> > which takes fewer lines of code to do directly than will be required for
> a function declaration, don't use a
> > function. This keeps down the burden on the heap assignments, and
> decreases the likelihood of a heap-stack
> > collision -- easily the most common cause of the "blue-screen-of-death"
> (BSOD). Sometimes I violate this
> > rule if a gazillion descending field elements are nested together in the
> variable name, but I feel guilty
> > about it afterwards.
> >
> > Also, the 'action' declaration I picked can be substituted out for
> anything of your choosing -- you'll
> > probably want to point it to your friendly neighborhood CGI/BIN server
> which handles your other forms
> > submissions. However, the onSubmit kicks in BEFORE the action gets
> invoked, and if checkForm returns a
> > false, the action is disabled and the form contents don't go anywhere
> (in theory). Sometimes, a broken
> > FrontPage build of the form will send it on anyway, thereby crashing the
> forms server and endearing you
> > (and Microsoft) to thousands of freshly outraged customers. [Hence the
> reason I don't use FrontPage].
> >
> > Again, I caution you -- if you have ANYTHING in your form which is an
> element, but not a vanilla text
> > input, this simple script won't cut it anymore, and you'll have to put
> some more hair on its chest.
> >
> > -- Dave Lovering
> >
> >
> > Alexandre Zglav wrote:
> > >
> > > Ok thanks a lot for the tips.
> > >
> > > I have applied a few changes to my code accordingly to your last email
> and
> > > the script doesn't jam anymore. I still have a problem thought : the
> > > tests seem to be completely bypassed. If i try my form and leave it
> blank,
> > > the form is submitted and there is no alert ....
> > >
> > > Oh and by the way you guessed right : i am trying to test variable
> amount
> > > of text fields passing them into CheckName
> > >
> > > Here is the code I am using now :
> > >
> > >
> > >
> > > Probably that the return true is missplaced ( its in commentary right
> now
> > > as I'm not sure on where to place it )
> > >
> > > Thanks again for your help.
> > >
> >
> --------------------------------------------------------------------------
> ----------------------------------------------------------------------------
> ----------------------------------------------------------------------------
> -----------------------------
> > > Name: New Text Document.txt
> > > New Text Document.txt Type: Plain Text (text/plain)
> > > Encoding: base64
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
-------------- next part --------------
A non-text attachment was scrubbed...
Name: dlovering.vcf
Type: text/x-vcard
Size: 304 bytes
Desc: Card for David T. Lovering
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20030318/38d912b5/attachment.vcf>
More information about the Javascript
mailing list