Little problem with this form

**EpiGamer** · 02-18-2012, 11:37 PM

I'm fairly new to JavaScript so I’m still trying to get my head around it and stuff, but I’ve managed to come up with a basic form with checks in place to validate the form when it is submitted. I’ve managed to get everything working except for one of the input fields which are the UK post code field. I’ve found an expression for the UK post code but I’m having difficulty with implementing it correctly so it displays the alert when the user enters there Postcode in an incorrect format. I’ve placed all of the forms checks inside one function which validates the form, if somebody could help me out with this post code issue that would be great!

Here's the JavaScript I’m stuck with;

Code:

// Check for revising wherever the inputted data is in the correct format e.g. UK Post Code //NEED HELP WITH THIS ONE
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
if(regPostcode.test(postcode) == false)
  {
  alert("Your Post Code is in the wrong format");
  contactform.postcode.focus();
  return false;
  }

Here is the HTML form field associated with it;

Code:

<div class=”field_container”><label>Post Code</label><input type=”text” name="postcode" id="postcode" /></div>

**jscheuer1** · 02-19-2012, 02:35 AM

First off and this may or may not be a problem in some browsers, the use of left and right quotes (you only have left ones or right here):

Code:

<div class=”field_container”><label>Post Code</label><input type=”text”

is generally invalid. They should be " symbols instead.

I'm ignorant of what constitutes a valid UK postal code. However, the regular expression in your post has an obvious logical flaw at the end:

Code:

[a-zA-z][a-zA-z]

I'm almost certain these were meant to mean all upper and lower case letters like the others:

Code:

[a-zA-Z]

so that could esily be the problem or at least a part of it.

Also, [0-9] means the same as \d. And letters may be flagged as case insensitive with the i switch at the end of the expression. Additionally ([ ]) means the same as ( ), and the use of {1}, which means one and only one time is the default, so is unnecessary.

With all that in mind, the entire expression can be considerably shortened to*:

Code:

/^([a-z])(\d\d|\d|[a-z]\d[a-z]|[a-z]\d\d|[a-z]\d)( )(\d[a-z][a-z])$/i

Oh, and:

Code:

if(!regPostcode.test(postcode))

is the same as:

Code:

if(regPostcode.test(postcode) == false)

So you would have:

Code:

// Check for revising wherever the inputted data is in the correct format e.g. UK Post Code //NEED HELP WITH THIS ONE
var regPostcode = /^([a-z])(\d\d|\d|[a-z]\d[a-z]|[a-z]\d\d|[a-z]\d)( )(\d[a-z][a-z])$/i;
if(!regPostcode.test(postcode))
  {
  alert("Your Post Code is in the wrong format");
  contactform.postcode.focus();
  return false;
  }

If that doesn't take care of the problem, let me know - and tell me the criteria for a valid UK postal code. A link to your page would be a great help.

One other thing. regPostcode.test(postcode) doesn't tell us whether or not postcode has been properly defined elsewhere as the value of the postcode input. If it hasn't, then most likely it will always fail the test.

Here's a working demo that includes an example of the shortest and the longest code that would fit the criteria, which are outlined in plain words:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Check for revising wherever the inputted data is in the correct format e.g. UK Post Code //NEED HELP WITH THIS ONE
function cpc(){
var regPostcode = /^([a-z])(\d\d|\d|[a-z]\d[a-z]|[a-z]\d\d|[a-z]\d)( )(\d[a-z][a-z])$/i;
if(!regPostcode.test(document.getElementById('postcode').value))
  {
  alert("Your Post Code is in the wrong format");
  document.getElementById('postcode').focus();
  return false;
  }
 }
</script>
</head>
<body>
<div class="field_container"><label>Post Code</label><input type="text" name="postcode" id="postcode" /></div>
<input type="button" value="Check Code" onclick="cpc();">
<br>shortest valid code: 'a1 1aa'
<br>longest valid code: 'aa1a 1aa'

<div>Criteria</div>
<pre>one letter followed by:

a. one or two numbers

or

b. one letter one number one letter

or

c. one letter and two numbers

or

d. one letter and one number

followed by:

a space one number and two letters.</pre>
</body>
</html>

*a little more shortening is possible.

**EpiGamer** · 02-19-2012, 01:07 PM

Thanks a lot for the response, I figured out from your post that I wasn't defining where the postcode value was being entered meaning there was no link between the field and the function script. I also changed the expression to what you suggested, all is good and working now, thanks!

**jscheuer1** · 02-19-2012, 04:24 PM

Great! However, I just checked the Royal Mail website and the say the definition for a postal code is different:

What is a postcode?

A postcode is a group of numbers and letters that give precise and essential information about a mail item’s destination. It’s made up of several parts, each of which provides us with specific information.

Example: SO31 4NG
This breaks down as follows:
Outward Code: SO31
SO = the postcode area. One or two letters identify the main office the mail initially goes to.
31 = the postcode District. One or two characters, numeric except, occasionally, in central London. This helps to sort the item at the main office.

Inward Code: 4NG
4 = the Sector. A number defining a neighbourhood within a district.
NG = the Unit code. Two letters that identify a group of approximately 15 addresses.

Please make sure you use full, correct postcodes. The Postcode Finder is designed to help you do this.

So theirs is a little more restrictive. With them all codes must begin with two letters followed by one or two letters or numbers, a space, a number, two letters. It's not so bad though, any code that will satisfy the Royal Mail's criteria will also satisfy that setup by the regular expression. However, the regular expression will allow some codes that are not allowed by the Royal Mail's own definition. They should know, though I guess it's possible they've not articulated it properly.

In any case, according to their definition it should be:

Code:

/^[a-z]{2}[\da-z]{1,2} \d[a-z]{2}$/i

Thread: Little problem with this form

Thread Tools

Search Thread

Little problem with this form

Bookmarks

Bookmarks

Posting Permissions