Verification follows a similar pattern to validation. There is verifyAddress function which is executed when the Verify button is clicked and the verifiyCallback function which is executed when the server responds with a context of ‘verify’.
Javascript:
function verifyAddress()
{
var v_code = theForm.v_code.value;
var id = theForm.email_id.value;
if (v_code == ”) {
/* no verification code has been entered */
alert(‘No Verification Code Entered’);
theForm.v_code.focus();
return;
}
/* add the verification code to the query string */
var dataString = ‘id=’ + encodeURIComponent(id) + ‘&v_code=’ + encodeURIComponent(v_code);
xmlHTTP.open(‘get’, emailValidate + ‘verify&’ + dataString, true);
xmlHTTP.onreadystatechange = parseResponse;
xmlHTTP.send(null);
}
The verifyCallback function checks for successful verification. If verification succeeded, the verify button’s text is changed to “verified”, disabled and the submit button is enabled. It also clears the email input box. This means that when the form is submitted, only the email ID is passed to the receiving script and not the email address. The email ID can then be used by the script which processes the form data to check the address has been verified–if it has, it need not be verified again.
Javascript:
function verifyCallback(response)
{
var v_code = theForm.v_code.value;
theForm.email_id.value = response[‘data’];
if(response[‘status’]) { // successful verification
btnVerify.setAttribute(‘disabled’, ‘disabled’);
txtVerify.setAttribute(‘disabled’, ‘disabled’);
btnVerify.innerHTML = ‘<i>Verified</i>’;
verifyMsg.innerHTML = ”;
/* enable the submit button */
btnSubmit.removeAttribute(‘disabled’);
verifyMsg.innerHTML = ‘<b><i>’ + theForm.email.value + ‘</i></b>’;
theForm.email.value = ”;
} else {
verifyMsg.innerHTML = ‘<b>Verification Failed</b>’;
}
}
Putting it All Together
Congratulations, you now have a working Ajax application which validates emails. You should have the following four files in the same directory:
email_validate.php
email_validator.php
ajax_validation_engine.js
ajax_form.html
Ajax Email Validation
The three files required for this application are also included in the ZIP file.
Extending this Example
To keep the application simple, we have omitted some details which would be advisable to implement in a real world scenario:
* An extra box field should be included in the form to confirm the email address. Only when both email addresses match, should the Ajax engine send it to the server and validate.
* The email EmailValidator includes a remove method, which should be used by the script receiving the form data to remove the email address from the database once verification has been confirmed. This will prevent the database from growing to an unsavory size.
* We have not created the input.php script which receives the form data. If the email address was validated, it will not be sent to the input.php script–instead the email_id variable will be sent. The script can then use the email validator to check whether or not the email has been verified.
* By default, the EmailValidator creates the SQLite database in the same directory as the running script. For obvious security reasons, you should change the path of the database to one which is inaccessible by the web server.
Sites Which use Ajax
Below is a small taste of the many web sites with applications which use Ajax. This list is likely only to grow. So be one of the first web developers to jump on the Ajax bandwagon!
* Yahoo News – Hovering over the links to articles produces a small image and synopsis or the news item.
* Google Suggest – The text typed in the search box is buffered and sent to the Google server at regular intervals, producing a dropdown list of suggested searches.
* A9 – Amazon-based search engine which, in conjunction with XMLHTTP and IFRAMES, delivers an interfaces which responds instantly to user input, updating search results immediately.
* Google Mail – The Gmail application again uses a combination of IFRAMES and XMLHTTP to create a sleek responsive interface. Google also uses a pattern known as polling to regularly check the user’s email.
Download: email_validator.zip
