PDA

Click to See Complete Forum and Search --> : Combination Postal Zip validation

Leo67
10-09-2003, 11:02 AM
Hi,

I am VERY new to javascript. I am currently trying to add an input field into a form that performs the following validation.

1. if the user enters six characters the form validates the code to show as X2X2X2 (CDN Postal Code). All letters are capitalized automatically and a message pops up showing telling the user that they have to enter the Postal Code as X2X2X2 format.

2. if the user enters 5 characters (US Zip Code) the characters all need to be numbers.

The current error message I am receiving is the following: 'return' statement outside the function. I have played with the code so much at this point that no matter what I change I am getting numerous error messages. Please help!!
_________________________________________________________

<SCRIPT LANGUAGE="JavaScript">
function CheckPostalZip (input) {
s = this.form1.PostalZip.value;
strlen = this.form1.PostalZip.length;
filteredValues = " !@$#%^&*/,-";
var i;
var returnString = "";
for (i = 0; i < s.length; i++) {
var c = s.charAt(i);
if (filteredValues.indexOf(c) == -1) returnString += c;
}
input.value = returnString.toUpperCase();
}
if (strlen == 6)
if ('ABCDEFGHJKLMNPQRSTUVWXYZ'.indexOf(input.charAt(0,2,4)) < 0) {return false;}
if ('0123456789'.indexOf(input.charAt(1,3,5)) < 0) {return false;}
ELSE
if (strlen==5)
if ('0123456789'.indexOf(input.charAt(0,1,2,3,4)) < 0) {return false;}
return true;
}
</script>
</HEAD>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BGCOLOR="#FFFFFF"><br><br><br><br>
<form name="form1" method="get" onSubmit="return CheckPostalZip()" action="PostalZipTest.asp">
<table cellpadding="0" cellspacing="0" width="200" align="center">
<tr><td height="23" nowrap>POSTAL/ZIP CODE :</td><td height="23"><input type="text" name="PostalZip" size="6" maxlength="6"></td></tr>
</table>
</form>
Charles
10-09-2003, 12:17 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
String.prototype.isPostalCode = function () {return /^(\w\d){3}$/.test(this) || /^\d{5}(-\d{4})?$/.test(this)}
// -->
</script>

<form action="">
<div>
<label>Postal Code<input type="text" onchange="if (!this.value.isPostalCode()) {alert('That would not appear to be a valid postal code.'); this.value=''; this.focus()}"></label>
<button type="submit">Submit</button>
</div>
</form>
Leo67
10-09-2003, 12:24 PM
:D THANK YOU!!!!!!!!
Leo67
10-09-2003, 12:39 PM
:D THANK YOU!!!!!!!!
Leo67
10-09-2003, 12:46 PM
Hi Again ....
The code now works but I really don't know how tomake additions to the code Charles presented.

I still need to add the following lines of code to the function but I am not sure how to go about it :(

Code to add:
input.value = returnString.toUpperCase();
filteredValues = " !@$#%^&*/,-";
Also ... if the Code is six characters which are all numbers the alert should still pop up because Zip codes are only 5 characters in length.

Current code:

<HTML>
<HEAD>
<script type="text/javascript">
<!--
String.prototype.CheckPostalCode = function () {return /^(\w\d){3}$/.test(this) || /^\d{5}(-\d{4})?$/.test(this)}
// -->
</script>
</HEAD>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BGCOLOR="#FFFFFF"><br><br><br><br>
<form name="form1" method="get" action="">
<table cellpadding="0" cellspacing="0" width="200" align="center">
<tr><td height="23" nowrap>POSTAL/ZIP CODE :</td><td height="23">
<label>
<input type="text" maxlength="6" size="6" onchange="if (!this.value.CheckPostalCode()) {alert('That would not appear to be a valid postal code.'); this.value=''; this.focus()}">
</label>
<button type="submit">Submit</button>
</td></tr>
</table>
</form>
</BODY>
</HTML>
Charles
10-09-2003, 12:53 PM
Oops, my mistake. Try this one out...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
String.prototype.isPostalCode = function () {return /^([A-Za-z]\d){3}$/.test(this) || / ^\d{5}(-\d{4})?$/.test(this)}
// -->
</script>

<form action="">
<div>
<label>Postal Code<input type="text" onchange="if (!this.value.isPostalCode()) {alert('That would not appear to be a valid postal code.'); this.value=''; this.focus()}"></label>
<button type="submit">Submit</button>
</div>
</form>

As to the pieces of code that you aretrying to add. If I knew what you were trying to do with them perhaps I could heldp.
Leo67
10-09-2003, 01:01 PM
The following code is supposed to strip invalid characters and change all lowercase letters to uppercase (it works on its own but I am unable to get it to work within any other function.

function stringFilter (input) {
s = input.value;
filteredValues = " !@$#%^&*/,-"; // Characters stripped out
var i;
var returnString = "";
for (i = 0; i < s.length; i++) { // Search through string and append to unfiltered values to returnString.
var c = s.charAt(i);
if (filteredValues.indexOf(c) == -1) returnString += c;
}

input.value = returnString.toUpperCase();
}
Charles
10-09-2003, 01:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
String.prototype.isPostalCode = function () {return /^([A-Za-z]\d){3}$/.test(this) || /^\d{5}(-\d{4})?$/.test(this)}
// -->
</script>

<form action="">
<div>
<label>Postal Code<input type="text" onchange="this.value = this.value.replace(/\W/g, '').toUpperCase(); if (!this.value.isPostalCode()) {alert('That would not appear to be a valid postal code.'); this.value=''; this.focus()}"></label>
<button type="submit">Submit</button>
</div>
</form>
Leo67
10-09-2003, 01:10 PM
Thank you VERY much Charles. Its working poifectly now! I have been beating my head against my monitor for 2 days trying to figure this out and I was running out of Advil ;)
Charles
10-09-2003, 01:14 PM
Before you do any serious damage to that monitor (heads heal, computers do not) read up on Regular Expressions (http://devedge.netscape.com/library/manuals/2000/javascript/1.3/guide/regexp.html).
Leo67
10-09-2003, 01:19 PM
Thank you again! The site is exactly what I need to learn this stuff.

P.S. Monitor is okay just need to readjust the settings a bit ;)