validation - alpha and numeric - how to modify this script?

leeolive · Nov 4, 2003

Hi

I have found script which doesn't use alerts (from Javascript Source). It checks for empty, and min and max no of characters and email. I am trying to add functionality to check for alpha characters and then also for numeric. Could someone please help me with this as I am new to JavaScript? I think it's the syntax.. I got the script from here

http://javascript.internet.com/forms/val-no-alert.html

I guess it would be something like this for alpha
(f.MaidenName.value !=("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-'&quot

???

I have this so far

<html>
<head><title></title>

<SCRIPT LANGUAGE="JavaScript">

<!-- Web Site:

http://www.site-ations.com

-->



<!-- The JavaScript Source!!

http://javascript.internet.com

-->

<!-- Begin
// Preload images
var empty = new Image(); empty.src = "images/fieldempty.gif";
var email = new Image(); email.src = "images/emailerror.gif";
var zipcd = new Image(); zipcd.src = "images/ziperror.gif";
var phone = new Image(); phone.src = "images/phoneerror.gif";

var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}

function validateForm(f) {
haveerrors = 0;
(f.fname.value.length < 1) // validate first name length
? showImage("firstnameerror", "fieldempty.gif", true) // no semi-colon after this line!
: showImage("firstnameerror", "blankimage.gif", false); // true = errors, false = no errors

(f.lname.value.length < 1) // validate last name length
? showImage("lastnameerror", "fieldempty.gif", true)
: showImage("lastnameerror", "blankimage.gif", false);

(f.zip.value.length != 5) // validate zip code length
? showImage("ziperror", "ziperror.gif", true)
: showImage("ziperror", "blankimage.gif", false);

phonenumlength = f.area.value.length +
f.exchange.value.length + f.number.value.length;

(phonenumlength != 10) // validate phone number length
? showImage("phoneerror", "phoneerror.gif", true)
: showImage("phoneerror", "blankimage.gif", false);

(f.email.value.search("@&quot

== -1 || f.email.value.search("[.*]&quot

== -1) // validate email
? showImage("emailerror", "emailerror.gif", true)
: showImage("emailerror", "blankimage.gif", false);

return (!haveerrors);
}
// End -->
</script>

</head>
<body>

<center>
<form action="script.cgi" name="myform" onSubmit="return validateForm(this)">
<table border=0 cellspacing=0 celpadding=0>
<tr>
<td colspan=2>Enter your information:<br>
<sup>(<font color="#ff0000">*</font> denotes required field).</sup></td>
</tr>
<tr>
<td><p align=right>
First Name:</td>
<td>
<input type=text name="fname" size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=firstnameerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Last Name:</td>
<td>
<input type=text name="lname" size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=lastnameerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Zip Code:</td>
<td>
<input type=text name=zip size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=ziperror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Email:</td>
<td>
<input type=text name=email size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=emailerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Phone:</td>
<td>
<input type=text name=area size=4 maxlength=5>-
<input type=text name=exchange size=4 maxlength=3>-
<input type=text name=number size=5 maxlength=4><font color="#ff0000">*</font><br>
<img name=phoneerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td colspan=2><p align=center>
<hr>
</td>
</tr>
<tr>
<td><p align=center>
</td>
<td><p align=right>
<input type=submit value="Submit Form"></td>
</tr>
</table>
</form>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="

http://javascriptsource.com">The

JavaScript Source</a></font>
</center><p>

</body>
</html>

Thanks for your help!
Lee

vbkris · Nov 4, 2003

er, this will do:
var str="ASDASDASDASD"
if(!str.match(/^[A-Za-z0-9_]+$/))
{
alert("Str has values other than alpha numeric and numbers and _.&quot

}

does this help?

Known is handfull, Unknown is worldfull

leeolive · Nov 4, 2003

Thanks for replying! I need to check only for alpha characters (once I have figured out alpha, numeric should be easy). I am trying to get it to become part of the script that I already have as it works well. The alpha checking line needs to fit this format/syntax

(f.email.value.search("@&quot

== -1 || f.email.value.search("[.*]&quot

== -1)

or this format
(f.fname.value.length < 1)

I have this, but I don't think I have the logic right.
(f.MaidenName.value.search("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-'&quot

== -1)

Basically what I want to say is "if value entered in the text box does not equal any of these characters abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-'"

then (the rest as seen below is easy - I can do)
? showImage("firstnameerror", "images/fieldempty.gif", true) // no semi-colon after this line!
: showImage("firstnameerror", "images/blankimage.gif", false); // true

(Depending on the argument - if the outcome is true then it will call on an image which says 'not alpha'.)

Thanks!
Lee

Lrnmore · Nov 4, 2003

Using vbkris' idea to include regular expressions and
make things alot easier try this:

var realph = /^[a-zA-Z-]+$/;
var renums = /^[0-9-]+$/;

(!f.lname.value.match(realph)) // validate last name
? showImage("lastnameerror", "fieldempty.gif", true)
: showImage("lastnameerror", "blankimage.gif", false);

modified for other field:

(!f.MaidenName.value.match(realph)) //valid maiden name
? showImage("lastnameerror", "fieldempty.gif", true)
: showImage("lastnameerror", "blankimage.gif", false);

And you can use the renums for the phone if you want.

You might want to add an extra image name and gif for the extra field.

Try this working example for an idea how it works:

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html><head><title>TEST</title>
<script>
function ckalph(str) {
 var re = /^[a-zA-Z-]+$/;
 if(!str.match(re)) { alert(&quot;Bad Char&quot;); }
 else { alert(&quot;Good String&quot;); }
}
function cknum(str) {
 var re = /^[0-9-]+$/;
 if(!str.match(re)) { alert(&quot;Bad Char&quot;); }
 else { alert(&quot;Good String&quot;); }
}
</script></head><body>Enter Alph:
<input type=&quot;text&quot; name=&quot;tst&quot; onBlur=&quot;ckalph(this.value);&quot;>
<br>Enter Numbers:
<input type=&quot;text&quot; name=&quot;tstb&quot; onBlur=&quot;cknum(this.value);&quot;>
</body></html>

2b||!2b

leeolive · Nov 4, 2003

Thanks for getting back!

It seems to be working

only thing is that I need to also allow hyphens and apostrophe's in the alpha set as some people may have those in their names. I tried to add it within the [] and outside but it doesn't take any notice - still finds it false.

I also need to allow for commas and points(,.) in the numeric variable.

function validateForm(f) {
var realph = /^[a-zA-Z-]+$/;
var renums = /^[0-9-]+$/;

Any idea?
Thanks!
Lee

Lrnmore · Nov 4, 2003

Try:

var realph = /^[a-zA-Z\'-]+$/;
var renums = /^[0-9\.\,-]+$/;

Let us know if any trouble....

2b||!2b

leeolive · Nov 4, 2003

You're a star!

One more question..I have over forty fields I need to validate and the script is getting so long. I'd like to place it in an external js file, like so
<script language="JavaScript" src="formvalidation.js"></script>

but how do I call on it if my form tag is as follows:
<form action="submit.asp" name="myform" onSubmit="return validateForm(this)">

thanks for you help!
Lee

Lrnmore · Nov 4, 2003

When you supply an external src there is no difference
in calling the functions. It's just like when it is on
the page.

This is how you load from src:

<script src="ursource.js" type="text/javascript"></script>

Preferably in the <head> section of the page.

Make sure you reference a relative path to the
source.

2b||!2b

leeolive · Nov 4, 2003

Thanks, must I leave out the <script> tags within the external js file? Sorry but I can't test it until I have completed the entire thing as I've done half.
Cheers
Lee

Lrnmore · Nov 4, 2003

That is correct you will leave the script tags off
of the external file.

2b||!2b

leeolive · Nov 4, 2003

This has honestly got to be the *last* question!

I have just one checkbox that I need to ensure is checked. What would the syntax be? I have tried this, but it just ignores it completely. I guess I can't say value.length < 1?

(f.ContractedInIndicator.value.length < 1)
? showImage("ContractedInIndicator", "images/fieldempty.gif", true) // no semi-colon after this line!
: showImage("ContractedInIndicator", "images/blankimage.gif", false);

While I am asking - would the solution apply for radio buttons and drop downs?

Thanks, Lrnmore.

leeolive · Nov 4, 2003

I'm also getting the following error only when my server side validation kicks in and prints a page saying 'not completed..' User then clicks the back button and all the values are posted back into the form. If user then completes the form properly and clicks submits, I get this error

exception of type "Microsoft JScript runtime error: 'document [...]' is null or not an object was not handled

If I debug it takes me to this code and highlights
this : document[imagename].src = imageurl; and when I hover over this line it says "imageurl= images/blankimage.gif"

var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}

The images weren't in a folder originally. I then placed them in an images folder and changed all the paths to /images. Do you think this is why it's doing this?

I am almost there and your help has been invaluable! This has taken me days..
Thanks
Lee

Lrnmore · Nov 4, 2003

Well,

>>the following error only when my server side validation kicks in and prints a page saying 'not completed..'

Is there something left undone that let's the form
be submitted, if we are doing your cks correctly it
should not get that far.

One test I can think of for the error, if you deliberately
throw an error does it pull the images correctly??

Try to pull them all....

Is there a reason you don't want to use alerts like
everybody else?

I wonder if something is happening to the cache when
focus is returned to the page after the error.

And as far as checking the state of a checkbox:
if(document.forma.ckboxa.checked == true){
alert("Checked&quot

; }

Radio buttons have to use an index.

Check out my newly published but not ready for
syndication form tool at:

http://www.tek-tips.com/faqs.cfm?spid=216&sfid=4364

It will hopefully give you an idea or two about
ref to form elements.

2b||!2b

leeolive · Nov 4, 2003

2b||!2b

Your code looks interesting. Will it perform all checks? It's a nightmare to find a script that performs all types of checks. Most of them only do 2 or 3 checks and then you're left trying to figure out how to do the rest. Will you be posting an example once it's complete? Always helps to be able to test run it to see exactly how it works. Looks like I've been asking the right person re all this!

All the checks are now performing perfectly and all images appear. However, if someone has javascript turned off then the asp server side validation will kick in and check that the fields are not empty. It retrieves and stores the values from the form and then 'on click' posts them back to original form where I display another form (exactly the same) but with these posted values set as the values. It's in here the error occurs. Do you think it could be the cache?

I also noticed with the line which the debugger highlights as an error

document[imagename].src = imageurl;

maybe it's something to do with 'document'? I have tried 'window.document' but still an error. It must be either the document part or the imageurl part. Does this ring any bells?

Thanks!
Lee

Lrnmore · Nov 4, 2003

well duhhh, this could be the prob. try:

document.images[imagename].src = imageurl;

It will work better this way I'm sure.

If not, since your images work correctly the first load, I'm
thinking something has to be amiss with the focus
return.

Can you just use alerts and be like everybody else??

2b||!2b

leeolive · Nov 4, 2003

Thanks for sticking with me on this.

That was it - it's now working..

I originally went for the script because it performed more checks than other scripts I saw. It's been well worth it though as the way it validates looks amazing - very cool. Take a look at the orginal example:

http://javascript.internet.com/forms/val-no-alert.html

MUCH APPRECIATED!
Lee

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

validation - alpha and numeric - how to modify this script?

leeolive

Programmer

vbkris

Programmer

leeolive

Programmer

Lrnmore

Technical User

leeolive

Programmer

Lrnmore

Technical User

leeolive

Programmer

Lrnmore

Technical User

leeolive

Programmer

Lrnmore

Technical User

leeolive

Programmer

leeolive

Programmer

Lrnmore

Technical User

leeolive

Programmer

Lrnmore

Technical User

leeolive

Programmer

Similar threads

Part and Inventory Search

Sponsor