SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Toronto
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form validation script - help needed!

    Hi Folks,

    I have a text field on one of my form pages, which requests either a 5 digit US zip code, or the first 3 digits of a Canadian postal code (example H9C).

    Presently the javascript I have on the page which validates the users input, only checks to see if they have entered in 3 or more numeric, or alphanumeric digits .

    I would actually like the validation script first to examine if the input was all numeric, and if it was? It would check to make sure the user entered in exactly 5 digits. If they didn't? the error message pop up screen needs to read "You must enter in a complete 5 digit zip code". (This part would make sure American users are only able to enter in a full 5 digit zipcode)

    The second part of the validation script will need to look at the users input again, and if the user entered in a alphanumeric value. The script must check to make sure only 3 digits were entered. If the user entered in more than 3 alphanumeric digits, then the error message needs to read "You must enter in only the first 3 digits of the postal code" (This will ensure Canadians only enter in the first 3 digits of their postal code and not 7)

    Hopefully some one has already written this script, or would be kind enough to write it for me. The name of the text field which users enter in either their zip code, or their partial postal code is named "searchfield"

    Thanks in advance for any help you can provide!

    Take care,

    Robert

  2. #2
    SitePoint Member
    Join Date
    Mar 2004
    Location
    namur
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should match your input with a regular expression:

    if (str == str.match(regex))
    {
    treatment();
    }

    the regular expression to check for only numbers is the following:

    /[0-9]+/

    the regular expression to check for alphanumeric string is the following:

    /[a-zA-Z0-9]+/

    so you would have something like this:


    Code:
    checkTextArea()
    {
       var str = myform.mytext.value;
       if(str == str.match(/[0-9]+/)
       {
           return (myform.mytext.length==5);
       }
       if(str == str.match(/[a-zA-Z0-9]+/)
       {
           return (myform.mytext.length==3);
       }
       return false;
    }
    this will only throw true or false, now if you want to add your messages you should adapt this to your needs (eg: if (myform.mytext.length!=5){alert("US zip code must contain exactly 5 digits"); return false;}return true; )

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Robert (great name)...had to get back to work so, abandoned this in midstream. See if it's close. Weird bug in Mozilla; see if you can ID it. I'm hoping it'll just go away.

    Tossed in an interesting faq from this here blog.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    body {background: #d8d8f0;}
    input {font: 12pt verdana;}
    pre {font-size: 8pt;}
    
    </style>
    <script type="text/javascript">
    
    function is_OK_postcode(oText)
    {
    	oText.value = oText.value.replace(/\s/g, '');
    	var searchfield = oText.value, msg = '';
    	var is_empty = (/^\s*$/gi.test(searchfield));
    	var is_junk = (/[^A-Z\d]/gi.test(searchfield));
    	var is_all_alpha = (/^[A-Z]+$/gi.test(searchfield));
    	var is_all_digits = (/^[\d]+$/gi.test(searchfield));
    	var is_five_digits = (/^\d{5}$/g.test(searchfield));
    	var is_three_alphanum = (/^[A-Z\d]{3}$/gi.test(searchfield));
    	var is_ok_canadian = (/^[ABCEGHJKLMNPRSTVXY][\d][A-Z]$/gi.test(searchfield));
    	if (is_empty)
    		msg += 'Please enter a zipcode (USA) or Canadian postal code (first 3 characters).';
    	else if (is_junk || is_all_alpha)
    		msg += 'Not a valid zipcode (USA) or Canadian postal code. Please correct.';
    	else if (is_all_digits && !is_five_digits)
    		msg += 'Please enter 5 numbers for a (USA) zipcode.';
    	else if (!is_all_digits && !is_three_alphanum)
    		msg += 'Please enter only the first 3 digits of the (Canadian) postal code.';
    	else if (is_three_alphanum && !is_ok_canadian)
    		msg += 'Please enter a valid (Canadian) postal code.';
    	if (msg != '')
    	{
    		alert(msg);
    		oText.focus();
    		oText.select();
    		return false;
    	}
    	else return true;
    }	
    
    function checkform(oForm)
    {
    	if (!is_OK_postcode(oForm.searchfield)) return false;
    
    	// other routines
    
    	return true;
    }
    
    </script>
    </head>
    <body>
    <hr />
    <pre>
    RegEx Patterns to Match Zip Codes and Postal Codes
    
    Need to match zip codes or postal codes? Of course, no two countries use the same format. But here are 
    solutions for USA, Canada, and the United Kingdom.
    
    The USA format is simple, five digits as 99999 or zip+4 as 99999-9999. A simple RegEx could be:
    
    \d{5}(-\d{4})?
    
    
    If you want to omit zips with a trailing hyphen (as in 99999-) then you could use a lookahead condition:
    
    \d{5}(?(?=-)-\d{4})
    
    Canada is a little trickier, the format looks like A1A 1A1 which can be easily matched with
    
    [A-Z]\d[A-Z] \d[A-Z]\d
    
    However, there is one rule that may be employed to improve validation, the opening character of the set 
    of characters (technically called the "forward sortation area" or FSA) identifies the province, territory, 
    or region (there are 18 characters that are valid in this position, A for Newfoundland and Labrador, B for 
    Nova Scotia, K, L, N and P for Ontario excluding Toronto which uses M, and so on.), and so validation should 
    ideally check to ensure that the first character is a valid one. And so, here is a better Canadian postal 
    code regular expression:
    
    [ABCEGHJKLMNPRSTVXY]\d[A-Z] \d[A-Z]\d
    </pre><br /><hr />
    <form action="javascript&#58;alert('ok')" onreset="elements[0].focus()" onsubmit="return checkform(this)">
    <input type="text" name="searchfield" value="" size="5" maxlength="5" />_____postcode<br /><br />
    <input type="submit" value="test">_____submit<br /><br />
    <input type="reset" value="clear">_____reset
    </form>
    <hr />
    </body>
    </html>
    Last edited by adios; Mar 16, 2004 at 21:11.
    ::: certified wild guess :::

  4. #4
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Toronto
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies guys! But regretfully I couldn't get either script to work. Which is most likely due to my total lack of skills when it comes to javascript.

    Possibly what I could do is send you guys a copy of the code I presently have on the page and you could point out what i need to do.

    If you could do this for me that would be great. To let me know - please either send me a e-mail or leave a new post here.

    Thanks again guy's,

    robert

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a public forum, so the preferred approach would be to continue this thread so everyone may participate.
    ::: certified wild guess :::


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •