PART II
Chapter 8: User Interface Design for Ajax 391
{
document.requestForm.zip.value = "";
var validationMsg = document.getElementById("validationMsg");
validationMsg.innerHTML = data[0];
}
else if (data.length > 2)
{
document.requestForm.city.value = data[1];
document.requestForm.state.value = data[2];
}
document.getElementById("spinner").style.display = "none";
var endTime = (new Date()).getTime();
var requestTime = (endTime - startTime)/1000;
document.getElementById("messageLog").innerHTML += "<br />Processed
Zipcode Validation on the Server in " + requestTime + " seconds.";
}
}
function checkFormat(zip)
{
var startTime = (new Date()).getTime();
var validationMsg = document.getElementById("validationMsg");
var regEx = new RegExp(/(^\d{5}$)|(^\d{5}-\d{4}$)/);
var valid = regEx.test(zip);
if (!valid)
validationMsg.innerHTML = "The Zip Code " + zip + " is NOT in a
valid format";
var endTime = (new Date()).getTime();
var requestTime = (endTime - startTime)/1000;
document.getElementById("messageLog").innerHTML = "Processed Zipcode
Format Validation on the Client in " + requestTime + " seconds.";if (valid)
{
validationMsg.innerHTML = "";
document.getElementById("spinner").style.display = "inline";
var url = "http://ajaxref.com/ch8/checkzip.php";
var payload = "zip=" + zip;
sendRequest(url, payload);
}
}
window.onload = function ()
{
document.requestForm.zip.onblur = function(){checkFormat(this.value);};
};
</script>
</head>
<body>
<div class="content">
<h2>Full US Zipcode Validate</h2>
<form name="requestForm">
<!-- sorry markup purists tables are shorter and more reliable
for form field alignment than CSS for now -->
<table cellpadding="5" cellspacing="5">