Jump to content

Postcode validation using js

S A

By S A
in JavaScript

Recommended Posts

S A Newbie

S A

Posted
Posted

Hi, I am a beginner at js but do have some basic knowledge. I am working on a Taxi Fare calculator to calculate the fare between 2 UK Postcodes. I have managed to get the script for the calculation part of this, and set that up with the correct figures, however I know also want to add Postcode validation, as an incorrect postcode at the moment could point the script to somewhere else in the world or if its entirely incorrect then give an error message. I would like the values entered to first go through the Postcode validation and if they are correct then be used by the calculation script. I have been able to find a script for the Postcode validation, but I am having issues combining these two scripts to work together due to my limited knowledge. I have currently tried combining them through the use of if statements, but have only been able to half work it - i.e. it worked on the one postcode but not the other. There are 3 other files which are required for this to entirely work but for some reason I am not permitted to upload that kind of file (.js and .asp). I have commented in the code, so I think it should make sense. If anybody can find a way to combine both functions in the form at the end, where both works, then it would be greatly appreciated. There are two postcode fields, as both would be required to find out the distance between them, and the validation is to be carried out on both fields. I used w3schools JS tutorials and editor to get this far, but I think I am know quite truly stuck, so wanted to find out if anybody would be willing to help me out or point me in the right direction to completing this. I will be happy to assist in anyway. Thanks :)SA Code below: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><!-- --- POSTCODE VALIDATION START --- --><script src="jspostcode.js" type="text/javascript"></script><script type="text/javascript"><!--function testPostCode(){// Postcode ONE  var myPostCode = document.getElementById('postcode').value;  if (checkPostCode (myPostCode))  {   postcode = checkPostCode (myPostCode)   document.getElementById('postcode').value = checkPostCode (myPostCode)  }  else  {   postcode="Not Valid"  };} function testPostCode2(){// Postcode TWO  var myPostCode2 = document.getElementById('postcode2').value;  if (checkPostCode (myPostCode2))  {   postcode2 = checkPostCode (myPostCode2)   document.getElementById('postcode2').value = checkPostCode (myPostCode2)  }  else  {   postcode2="Not Valid"  };}//--></script><!-- --- POSTCODE VALIDATION END - --- --><!-- --- DISTANCE CALCULATOR START --- --><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script><!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html --><script type="text/javascript">var geocoder, location1, location2, gDir;function initialize() {  geocoder = new GClientGeocoder();  gDir = new GDirections();  GEvent.addListener(gDir, "load", function() {   var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;   var drivingDistanceKilometers = gDir.getDistance().meters / 1000;   var Fare = ((drivingDistanceMiles - 1) * 1.6) + 4.50     var drivingDistanceMiles2 = Math.round(drivingDistanceMiles*100)/100   var drivingDistanceKilometers2 = Math.round(drivingDistanceKilometers*100)/100   var Fare2 = Math.round(Fare*100)/100   if (Fare<4.50)	  {	   Fare2="4.50";	  }	document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + ' <br /><strong>Address 2: </strong>' + location2.address + ' <br /><strong>Driving Distance: </strong>' + drivingDistanceMiles2 + ' miles (or ' + drivingDistanceKilometers2 + ' kilometers)<br /><strong>Fare: </strong>' + Fare2 + ' GBP';		});	} function showLocation(){geocoder.getLocations(document.getElementById('postcode').value, function (response){  if (!response || response.Status.code != 200)  {	 message="Postcode is not correct"	 document.getElementById("aaPostCode1").innerHTML=message;  }  else  {   location1 =   {	address: response.Placemark[0].address   };		   geocoder.getLocations(document.getElementById('postcode2').value, function (response)   {	if (!response || response.Status.code != 200)	{	 message2="Postcode is not correct"	 document.getElementById("aaPostCode2").innerHTML=message2;	}	else	{	 location2 =	 {	  address: response.Placemark[0].address	 };	 gDir.load('from: ' + location1.address + ' to: ' + location2.address);	}   });  }});}	</script><!-- --- DISTANCE CALCULATOR END - --- --></head><body onload="initialize()"><form action="#" onsubmit="showLocation(); return false;"><p style="color: #ff0000; margin-left: 20px;">Enter Postcode:  <input type="text" id="postcode" onfocus="this.select()" name="address1" alt="Enter test postcode"/>   <input type="text" id="postcode2" onfocus="this.select()"name="address2" alt="Enter test postcode" />   <input type="submit" value="Search" /></p></form> <p id="aaPostCode1"></p><p id="aaPostCode2"></p><p id="results"></p></body></html>

I tried the last form part using the code below first but no luck 

<form id="myform" onsubmit="validatePostCode(); showLocation(); return false;" action="#"><p style="color: #ff0000; margin-left: 20px;">Enter Postcode:<input type="text" id="postcode" maxlength="13" size="13" style="margin-left: 10px;" alt="Enter test postcode" /><input type="text" id="postcode2" maxlength="13" size="13" style="margin-left: 10px;" alt="Enter test postcode" /><button name="mybutton" type="button" onclick="testPostCode();testPostCode2();"   style="margin-left: 30px; color: #f00;">Check</button></p></form>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You should only be using one function for the handler. It sounds like that is your showLocation function. The showLocation function should do validation first. The validation function should also be generic, there's no reason to have 2 validation functions that do the same thing. I'm not sure what the checkPostCode function does, since you're calling it 3 times in the validation function, but if it returns true/false then you can use that to show an error message if you want to. 

function showLocation(){  if (!checkPostCode(document.getElementById('postcode').value))  {    alert('Post code is not valid');    return false;  }   if (!checkPostCode(document.getElementById('postcode2').value))  {    alert('Post code 2 is not valid');    return false;  }

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...