Link to home
Start Free TrialLog in
Avatar of normbry
normbry

asked on

can you validate this form validator

Below is a rather basic validation script, which is only half-doing what it's meant to do.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function everything(form) {
isName(form)
isEmail(form)

isComments(form)
allblanks(form)
}
function allblanks(form) {
if((isName(form) && isEmail(form)) && (isComments(form))) {
alert('Thank you!');
}
if((isName(form) == false || isEmail(form) == false) || (isComments(form) == false)) {
compose(form)
   }
}
function compose(form) {
var text = "You forgot to correctly fill in:"      
if(isName(form) == false) {
text += "\nYour name"
}
if(isEmail(form) == false) {
text += "\nYour e-mail address"
}
if (isComments(form) == false) {
text += "\nYour comments"
}
alert(text)
}
function isName(form) {
if (form.yourname.value == "") {
return false
}
else {
return true
   }
}
function isEmail(form) {
if ((form.email.value == "" || form.email.value.indexOf('@', 0) == -1) || form.email.value.indexOf('.') == -1) {
return false
}
else {
return true
   }
}
function isComments(form) {
if(form.cs.value == "") {
return false
}
else {
return true
   }
}
// -- End -->
</SCRIPT>

When the form in question is submitted, using:

<input type="button" name="thesubmit" value="Submit" onClick="submit(this.form);"> <input type="reset" value="Reset">

I get an OK-message, but then the form just sits there.

Btw, here's the remainder of the form:

<FORM METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp">
<INPUT TYPE=HIDDEN NAME=mailto VALUE="info@ogcgolf.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="Inschrijfformulier">
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.ogcgolf.nl/confirm.html">

Can you tell what - if anything - is wrong with this set-up.

Thank you

Bry
ASKER CERTIFIED SOLUTION
Avatar of jbirk
jbirk

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of normbry
normbry

ASKER

Hello Josh,

(Come across any browser emulators yet? I haven't; In fact, I've set my sights on an additional pc--it's the only way, I'm afraid)

Regarding the validator script above... I've recruited the aid of Javascripter (of www.trial.internet.com.)  and he came up with the following:


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function allblanks(form) {
if((isName(form) && isEmail(form))) {
form.submit();
}
else {
compose(form)
}
}
function compose(form) {
var text = "U heeft 't volgende niet of incorrect ingevuld:\n";
if(!isName(form)) text += "\nUw Naam";
if(!isEmail(form)) text += "\nUw Email";
alert(text)
}
function isName(form) {
return form.yourname.value != ""
}
function isEmail(form) {
return form.email.value != "" && form.email.value.indexOf('@', 0) != -1 && form.email.value.indexOf('.') != -1
}
// -- End -->
</SCRIPT>

To be used with:

<FORM METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp">
<INPUT TYPE=HIDDEN NAME=mailto VALUE="in.sites@tref.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="heihoef">
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.ogcgolf.nl/confirm_hh.html">

And: <input type="button" name="thesubmit" value="Verzenden" OnClick="allblanks(this.form)">

I've removed the variable "comment" which wasn't needed here.

What do you think? I mean it works, so who cares that it isn't too sophisticated :-)

However, I was wondering if I can just add a few other variables (such as "age", "home address" etc). Is there anything special I need to do to make that work?

Please tell a JScript layperson--ME!

Thanks for your time

(Yeah, I'm still figuring out which topic goes where.... Sorry 'bout that)


Well, OK, now, this new code which you've posted will work as posted!  I still would do it a different way personally, but that's just style.  I think it makes it easier to maintain (i.e. remove and add on later) if you do it my way.  SO I will post your current code in a new way, and try to explain how to add new fields on to it.
Code to follow.
-Josh
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function verify(form)
{var text="";
 var msg="U heeft 't volgende niet of incorrect ingevuld:\n";

 if (form.yourname.value=="") //if no name was supplied
  text = text + msg + "\nUw Naam";
 if (form.email.value=="" || form.email.value.indexOf('@',0)==0 || !form.email.value.indexOf('.')==0)
  text = text + msg + "\nUw Email";
 if (text=="") //if there are error messages, then alert the user and don't continue
  {alert(text);
   return false;
  }
 else //if there are no error messages, then continue
  return true;
}
// -- End -->
</SCRIPT>
To be used with:
<FORM METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp" onSubmit="return verify(this.form);">
<INPUT TYPE=HIDDEN NAME=mailto VALUE="in.sites@tref.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="heihoef">
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.ogcgolf.nl/confirm_hh.html">

And: <input type="submit" name="thesubmit" value="Verzenden">

OK, that code should work for you.  And to add another field, all you have to do is make sure that you name the field and then check to see if that field is blank, and if so add it to the error message patterned after this code:
if (form.field_name.value=="")
  text = text + msg + "\nthis field not supplied...";

The above will work for all the text fields.  If you another type you need to use slightly different code.  You may be able to use that program you used to generate the code for you and then figure out the method from it and copy it into my above code.

-Josh
Avatar of normbry

ASKER

Hi Josh,

Thanks for those pointers. Especially the ones about expanding on the script are going to be very useful, since this is just what I need to do for an application form that involves some serious input fields.

I take it that the above examples only work with text, as opposed to figures.... IOW, you can't install the script and command it to pop an alert on blank or incorrectly filled out fields ONLY (regardless of whether they're meant to be for text or digits)?

Either way, many thanks for this.

BTW, Javascripter is a guy. In fact, he's a Samaritan as well. Only he lives at www.trial.internet.com. You'd like him, 'coz he's just as much of a whiz as you are.

Cheers,

Bryan
I tried to load that web page but it tells me that there is no DNS entry for it.  Any ideas?

The power of what you can verify from the forms is limitless.  My friend and I just put together a page with a 3 step form where the second and third steps are dynamically created depending on the previous steps, all involving about 80-100 fields and a huge price matrix which all must be verified.  It gets pretty complicated especially when simply placing a quote in one field can crash the whole process... naturally we had to check for quotes after we discovered that, and it is no longer a problem.

Anyway, to get to the point, if you want to verify something specific about what was typed in the field it is certainly possible.

If you were to post another question asking how to verify whatever specific thing you needed verified, I'm sure it would be answered in a few hours.

You mentioned numbers, and that is easy, just use the function isNum().  It will return true if the passed value was a number and false otherwise.

best of luck!
-Josh
Avatar of normbry

ASKER

Josh,

Try this link:http://trial.internet.com:8000/cgi-bin/ubbs/Ultimate.cgi. (go to Javascript - that's his hang-out) It also has his homepage URL listed there, which is an odd one in that it's got about a gazillion conversion scripts, but not a whole lot else. Definitely Function before Form. He's bloody smart when it comes to js, though.

All right, I'm going to push my luck here and post the form. It's an application for membership at a golf club site I've recently finished (on http://www.ogcgolf.nl The form's on http://www.ogcgolf.nl/aanvraag.html BTW, don't use that one, 'coz it's still got all the *name= "" * in Dutch, which will be a pain for you to decipher). Here goes:

<FORM METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp"><TABLE BORDER="0"><TR><TD>
<INPUT TYPE=HIDDEN NAME=mailto VALUE="in.sites@tref.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="application">
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.ogcgolf.nl/confirm.html">
</TD></TR><TR><TD COLSPAN="3">
</TD></TR>
<TR><Th></Th></TR><TR><TD><INPUT type="radio" name="type" value="GL"> <STRONG>GL<INPUT type="radio" name="Type" value="Kl">KL<INPUT type="radio" name="type" value="JO">JO<INPUT type="radio" name="Type" value="JL">JL</STRONG><BR><BR></TD></TR>
<TR><Th>Achternaam:</Th>
<TD><INPUT TYPE=Text NAME="surname" SIZE=40></TD></TR>
<TR><Th>Voornamen:</Th>
<TD><INPUT TYPE=Text NAME="first names" SIZE=40></TD></TR>
<TR><Th>Straatnaam:</Th>
<TD><INPUT TYPE=Text NAME="street" SIZE=40></TD></TR>
<TR><Th>Postcode:</Th>
<TD><INPUT TYPE=Text NAME="zip" SIZE=40></TD></TR>
<TR><Th>Woonplaats:</Th>
<TD><INPUT TYPE=Text NAME="city" SIZE=40></TD></TR>
<TR><Th>Telefoonnummer:</Th>
<TD><INPUT TYPE=Text NAME="phone" SIZE=40></TD></TR>
<TR><Th>Geboortedatum:</Th>
<TD><INPUT TYPE=Text NAME="dob" SIZE=40></TD></TR>
<TR><Th>Beroep/functie:</Th>
<TD><INPUT TYPE=Text NAME="profession" SIZE=40></TD></TR>
<TR><Th>Bedrijf/Instelling:</Th>
<TD><INPUT TYPE=Text NAME="company" SIZE=40></TD></TR>
<TR><Th>Email:</Th>
<TD><INPUT TYPE=Text NAME="email" SIZE=40></TD></TR>
<TR><Th></Th></TR><TR><Th><TEXTAREA NAME="relatives"
          COLS="50"
          ROWS="3"
          WRAP="VIRTUAL"></TEXTAREA></Th></TR>
<TR><Th></Th></TR><TR><Th><INPUT TYPE=Text NAME="member" SIZE=58></Th></TR>
<TR><Th></Th></TR>
<TR><TD><INPUT type="radio" name="commission" value="yes"> <STRONG>Ja<INPUT type="radio" name="commission" value="no">Nee</STRONG></TD></TR>
<TR><Th></Th></TR>
<TR><TD><INPUT type="radio" name="handicap" value="yes"> <STRONG>Ja<INPUT type="radio" name="handicap" value="no">Nee</STRONG></TD></TR>
<TR><TD><BR><INPUT TYPE=SUBMIT VALUE="Verzenden"><INPUT type="reset" value="Wissen"></TD></TR></TABLE></FORM>

Wow, I stripped most of the xs code off, but it still looks scary, eh? Basically, it's got textfields for:

1)   surname
2)   first names
3)   street
4)   zip
5)   city
6)   phone (an "isNum()-job" I do believe)
7)   dob = date of birth (and another)
8)   profession
9)   company
10) relatives
11) membership
12) email.

Then there's three radio button questions:

a)  GL, KL, JO JL (membership types)
b)  commision yes/no,
c)  handicap yes/no

The "<form method=..."   and '<input type=..."  are idential to the script I posted above. And so is the OnClick code, namely:

<input type="button" name="thesubmit" value="Verzenden" OnClick="allblanks(this.form)">

I reckon the script is gonna be MEGA! (Nowhere near as complex as your dynamic form of course.... That must have been a real brain breaker)

Oh well, just see if you can cook something up here. But don't go spending hours on it, 'coz it's not as if the club is starving for more members. It would certainly up the coolness factor, however.

Well, that's it for me today. I'm gonna cop some ZZZZ's (it's nearing 11.30 here...)

Catch you tomorrow?

P.S. You know that script you suggested above? It's popping an alert on me. ("invalid character on line 7")
Got any clues?

Cheers


OK, well first I will address the error you had.
I found an error in the code I posted, but I'm not sure if it would cause the error you mentioned.  The line:
if (form.email.value=="" || form.email.value.indexOf('@',0)==0 || !form.email.value.indexOf('.')==0)
needs to have the '!' removed so it will look like:
if (form.email.value=="" || form.email.value.indexOf('@',0)==0 || form.email.value.indexOf('.')==0)

Also, when copying code from this site it is very easy to get errors from wrapped lines.  Make sure that everything is in one line that should be.  I cannot say exactly what your problem is unless I see the source code, so after you check my above two suggestions if it still does not work, please direct me to the url so I can check it myself.

As far as the code for the entire form, I will code that tomorrow (and I'd like to heard back about if you could get the current simpler code to work first).

The text fields will all be exactly the same to code.  However, you mentioned the following:
6)   phone (an "isNum()-job" I do believe)
isNum could be used on this, but a phone number will have dashes in it ('-') or maybe parenthesis, and possibly spaces.  So it gets more complicated.  First you'd have to decide what template you wanted to require if any, and then you need to be sure to give an example of that template so that the user at least has a chance of getting it right before getting a JavaScript alert.
7)   dob = date of birth (and another)
dob will probably have slashes in it ('/'), so it will be the similar problem as above.

Also another issue is whether or not you actually want all the fields to be required.  Maybe some fields will be allowed to be blank.

I will work on this when I hear back from you.
Best of luck!
-Josh
Avatar of normbry

ASKER

 Josh,


I tried your suggestion, but it's still acting up. ("invalid character on line 8").

You're right about giving users the option of leaving some fields open. I figure I can do without their phone number, so any input here, I'd consider a bonus. Typos etc.... never mind. And actually, same goes for date of birth. They can fill in 2nd of march 1788, leave it blank, or whatever; there's no priority there either.

And to be honest, all other fields can have typos too. It's just that they shouldn't be left blank (which could happen when they simply forget, right?)

So in a nutshell: the following should _not_ be left blank (but apart from that may contain any text - garbled or otherwise):
surname, first name, street, zip, city, profession, company, relatives, membership. Email, however, must be as correctly filled in as possible. I mean, you're always gonna get a joker now and again who fills in something like blah@blah.blah which would go undetected. But so long as the email conforms to the usual configuration, I'm happy. Also, the radio buttons need to be selected as well.

As far a s giving you the URL with the script on it: I can't, because I haven't implemented it yet. You can take a look at the page containing the form, though. It's on http://www.ogcgolf.nl/aanvraag.html On that one there the form's names are still in Dutch, however.

Good luck!

Bryan

OK, I whipped a small example.  You should be able to catch on to the method I am using for validation.  Also, I have tested this script and it doesn't have any errors in it.  If you experience erros it is from copy and pasting from this web page.  Go through the code and be sure that no lines have wrapped.

Here it is:
<HTML>
<HEAD>
      <TITLE>Untitled</TITLE>
<SCRIPT language="JavaScript">
<!-- Begin
function verify()
{var form=document.theForm;
 var text="";
 var i,found;
 var msg="The following field is invalid:\n";
 if (form.email.value=="" || form.email.value.indexOf('@')==-1 || form.email.value.indexOf('.')==-1)
   text = text + msg + "Email\n\n";
 if (form.surname.value=="") //if no name was supplied
   text = text + msg + "Surname\n\n";
 if (form.first_name.value=="")
   text = text + msg + "First name\n\n";
 if (form.street.value=="")
   text = text + msg + "street\n\n";
 if (form.zip.value=="")
   text = text + msg + "zip\n\n";
 if (form.city.value=="")
   text = text + msg + "city\n\n";
 if (form.profession.value=="")
   text = text + msg + "profession\n\n";
 if (form.company.value=="")
   text = text + msg + "company\n\n";
 if (form.relatives.value=="")
   text = text + msg + "relatives\n\n";
 if (form.membership.value=="")
   text = text + msg + "membership\n\n";
 for (found=false, i=0; i<form.commission.length; i++)
  {if (form.commission[i].checked)
    found=true;
  }
 if (!found)
   text = text + msg + "commission\n\n";
 for (found=false, i=0; i<form.handicap.length; i++)
  {if (form.handicap[i].checked)
    found=true;
  }
 if (!found)
   text = text + msg + "handicap\n\n";
 for (found=false, i=0; i<form.mem_type.length; i++)
  {if (form.mem_type[i].checked)
    found=true;
  }
 if (!found)
   text = text + msg + "membership type\n\n";
 if (text!="") //if there are error messages, then alert the user and don't continue
   {alert(text);
    return false;
   }
 else //if there are no error messages, then continue
   return false;
}
// -- End -->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="theForm" METHOD=GET ACTION="http://www.tref.nl/homeNL/mailer.asp" onSubmit="return verify();">
<INPUT TYPE=HIDDEN NAME=mailto VALUE="in.sites@tref.nl">
<INPUT TYPE=HIDDEN NAME=onderwerp VALUE="heihoef">
<INPUT TYPE=HIDDEN NAME=confirmation VALUE="http://www.ogcgolf.nl/confirm_hh.html">
<TABLE><TR><TD>Your E-mail:</TD><TD><INPUT TYPE="text" name="email" size=20></TD></TR>
<TR><TD>surname:</TD><TD><INPUT TYPE="text" name="surname" size=20></TD></TR>
<TR><TD>first_name:</TD><TD><INPUT TYPE="text" name="first_name" size=20></TD></TR>
<TR><TD>street:</TD><TD><INPUT TYPE="text" name="street" size=20></TD></TR>
<TR><TD>zip:</TD><TD><INPUT TYPE="text" name="zip" size=20></TD></TR>
<TR><TD>city:</TD><TD><INPUT TYPE="text" name="city" size=20></TD></TR>
<TR><TD>profession:</TD><TD><INPUT TYPE="text" name="profession" size=20></TD></TR>
<TR><TD>company:</TD><TD><INPUT TYPE="text" name="company" size=20></TD></TR>
<TR><TD>relatives:</TD><TD><INPUT TYPE="text" name="relatives" size=20></TD></TR>
<TR><TD>membership:</TD><TD><INPUT TYPE="text" name="membership" size=20></TD></TR>
</TABLE>
Commission: <INPUT type="radio" name="commission" value="yes"> <STRONG>Ja
<INPUT type="radio" name="commission" value="no"> Nee</STRONG>
<BR>Handicap: <INPUT type="radio" name="handicap" value="yes"> <STRONG>Ja
<INPUT type="radio" name="handicap" value="no"> Nee</STRONG>
<BR>Membership type: <INPUT type="radio" name="mem_type" value="GL"> <STRONG>GL
<INPUT type="radio" name="mem_type" value="Kl"> KL
<INPUT type="radio" name="mem_type" value="JO"> JO
<INPUT type="radio" name="mem_type" value="JL"> JL</STRONG>
<BR><input type="submit" name="thesubmit" value="Verzenden">
</FORM>
</BODY>
</HTML>


I hope that works for you!
-Josh
Avatar of normbry

ASKER

Hi Josh,

First off: many thanks for going through the effort of assembling this script. The site is gonna improve many times over because of it.

The bad news (and you're gonna think I'm screwing up big time - but really I'm not) is  that I can't for the life of me get the thing to work. It's not the wrapping that's causing the problem, coz I've copied the script as is. Also, I'm running my monitor at 800x600 (using HomeSite3.01). The error I'm getting is the same one as the previous script i.e. "invalid character, line 8" (In fact, when I test under NN4.0, it states the error as being an invalid character immediately preceding   var text= "";)

Josh, am I right in assuming that the script will not function under NN3.01 and below? The reason I suspect this is that trying the script in NN3.01 lights up my monitor like a christmas tree from all the alerts that are popping up. It's no big deal, 'coz I need to do a browser detect anyway, so I can fork the site. But of course I need the script to run in 4.0 version browsers.

When you say it's error free, what is it you're using to run the script? There may be an incompatibility there, eh?

Anyway, could you perhaps have one final look at it? If you can't spot anything amiss here, well then it must be my system. Just see what you can see...

Regards,

Norman

It has to be a copy paste problem.  I think it maybe some invalid characters showing up from the copy pasting (that are invisible).  I loaded the script onto my web page.  Go visit it with all of your target browsers.  It should work on any JavaScript enabled browser.  I tested it on Netscape 3,4 and IE 4 and it worked fine.  Here is the page:
http://aegis.mcs.kent.edu/~jbirk/form_validator.html
If that page gives you a problem when you load it, then something is wrong with your system for sure, but I couldn't see that happening (are you using a mac?)

Anyway, from there, assuming it works for you, you can save that page onto your hard drive and modify it as necesary.

-Josh
Avatar of normbry

ASKER

Well, by now you must be thinking that I'm a total idiot. Why do I say this? Because you were right about the cutting and pasting. I copied your script straight off the web and presto! no more errors. It's weird though, the way the same invisible characters appear when I switch to 'make visible' in HomeSiteSite as the "error-ridden". But, hey, we're getting there. At least we're getting zero alerts now.

Can it be, however,  that I need to remove a particular line first to make the script active, because as it is, it isn't sending the form anywhere, even after all fields have been typed in correctly. I checked and re-checked but: no dice. Not more hidden characters, surely...

Is there a difference (browser-compatibility-wise, that is) between <input type="button".... and <input type="submit".....?

I had a peek at your home page today. Would you mind if I actually went in and had a look? If it's OK with you, I'll have a closer look the day after tomorrow (I'm gonna be on a trip till then). BTW Your son looks adorable. My godson's sister Evi was born two months ago; your son looks about the same age. Am I right?

I noticed that your Family.jpg file was fairly byte-intensive, so I took the liberty of copying and optimizing it. It's now about half the byte load with hardly a quality difference. You can pick it up at http://www.ogcgolf.nl/Family.jpg. If you've got any more images that need optimizing, just let me know, and I'll do it. Cutting out all the excess bytes could really speed up your site.

Well, gotto run

Thanks again Josh

Regards,

Bryan

P.S. I'm on pc

I apologize about it not going anywhere.  I disabled the continuing part because I didn't want it to actually submit the form when I was testing it.  I forgot to return it to normal.  The last lines of the script should look like this (just changing the false to a true):
 else //if there are no error messages, then continue
   return true;
}

The input button and submit thing really doesn't have all much of a difference.  But since using a submit input and the event onSubmit() in the form tag is what the creators of html and javascript created for just this purpose it should always always run smoothly.  I think it's more understandable as well, instead of having to say document.theform.submit() when you want it submitted (but that's just my opinion).  Also sometimes people get confused and make an input type=submit button with an onClick event (like the button you had).  This will have unexpected results.  In some browsers the onClick will occur, but at the same time it is getting submitted, so you may or may not get your code executed before it continues along, and in some browsers it won't even acknowledge the onClick event.  This makes sense because submit buttons are already defined what happens to them when they are clicked on.  The input type=button is intended to be a user defined button, and therefor must have an onClick event...

Feel free to check out my home page all you like.  Tell me what you think about the puzzle game.  It took me a long time to get that working.  It's programmed entirely in JavaScript, and uses CGI once you win to record the top 10 scores.  I actually have an upgraded engine for it which is being used elsewhere, and haven't upgraded those yet.  I also will be adding a small click sound when you move a piece.

As far as my sons age, I don't have any recent pictures up there, so he's older than that now.  I've been falling behind for about 5 months or so now.  He's 7 months old.

Sorry about the large images.  I have a program called Smart Saver, which I have used on some of my images.  But recently I haven't used it because I've been concentrating on other stuff, and it makes no noticable download time for me since I have a direct connection to the net.  I intend to cut them all down eventually.  It just takes time.


-Josh
Avatar of normbry

ASKER

That was it. You know, you can still knock me over with a feather each time I witness the power of a few coded lines like this. How can those lines communicate such a complicated set of instructions to a computer? It just blows me away.

Well we've done it. (We...? Ha!) Thanks very much again for making time for me Josh. You've been a great help

Yes, SmartSaver is what I used to optimize that Family.jpg. It's a superb program.

I will check out that CGI page of yours and I'll let you know my feedback ASAPOK?

Cheers,

Bryan