- Introduction
- Creating a Form
- Server-Side Code
- Comparing the Data
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Comparing the Data
To compare the data, we’ll create a JavaScript object called Validator and import it into our HTML file along with the AJAX engine objects and a CSS file that we’ll create later:
<script type="text/javascript" src="js/model/AjaxUpdater.js"></script> <script type="text/javascript" src="js/model/HTTP.js"></script> <script type="text/javascript" src="js/model/Ajax.js"></script> <script type="text/javascript" src="js/view/Validator.js"></script> <link href="css/smartform.css" rel="stylesheet" type="text/css" />
The Validator object needs to be created and then initialized. The initialize method will set local variables for the object to be used later when we validate the data. The parameters include the ID of the form, the number of fields that we’ll be validating, and the ID of the submit button, which in our case is the register button:
Validator = new Object();
Validator.initialize = function(formId, fieldNum, submitId)
{
Validator.currentSelector = ’’;
Validator.currentForm = formId;
Validator.fieldNumToValidate = fieldNum;
Validator.submitId = submitId;
}
This method will be called in the onload event of the body in our HTML file:
<body onload="Validator.initialize(’SmartForm’, 5, ’submit’);document.getElementById(’SmartForm’).reset();">
The next method that we’ll add to the Validator is called validate. This method will take an HTML element as the selector, along with the element’s value. If these parameters exist, we set the currentSelector and call a method called Update in the AjaxUpdater object. The Update method will make an XML HTTP Request to the users.xml file and set a local Validator method, called onValidation, as a callback:
Validator.validate = function(selector, value)
{
if(selector && value)
{
Validator.currentSelector = selector;
AjaxUpdater.Update("GET", "services/users.xml", Validator.onValidation);
}
}
The onValidation method will fire when the response occurs. If the ready state passes, we’ll iterate the user and check for a matching value from the current input field (currentSelector). When we have a match, we’ll set the border color of the input field to red to show that the data already exists; when we don’t have a match, we’ll set it to green for success. This method can be modified to display any data at this point. For instance, we can display a message stating that the field data is currently being used, and so on. I chose to keep this example simple, to allow you to build on it.
Validator.onValidation = function()
{
if(Ajax.checkReadyState(’loading’) == "OK")
{
var users = Ajax.getResponse().getElementsByTagName(’user’);
for(var i=0; i<users.length; i++)
{
var value = users[i].getAttribute(Validator.currentSelector.id);
if(value.toLowerCase() == Validator.currentSelector.value.toLowerCase())
{
Validator.currentSelector.style.borderColor = "#ff0000";
}
else
{
if(Validator.currentSelector.style.borderColor != "#009900")
{
Validator.currentSelector.style.borderColor = "#009900";
Validator.fieldNumToValidate--;
}
}
Validator.currentSelector.style.borderWidth = "2px";
}
if(Validator.fieldNumToValidate == 0)
{
document.getElementById( Validator.submitId ).disabled = false;
}
}
}
For our example, we’ll add the validate method to the onblur event from each input field. This will fire each time a user presses Tab or clicks out of an input field, which will then validate the value against the XML:
<div id="Register">
<form id="SmartForm" method="post" onsubmit="return false;">
<div class="label">First Name:</div> <input id="firstName" type="text" onblur="javascript:Validator.validate(this, this.value);" />
<br/><br/>
<div class="label">Last Name:</div> <input id="lastName" type="text" onblur="javascript:Validator.validate(this, this.value);" />
<br/><br/>
<div class="label">E-mail:</div> <input id="email" type="text" onblur="javascript:Validator.validate(this, this.value);" />
<br/><br/>
<div class="label">Username:</div> <input id="username" type="text" onblur="javascript:Validator.validate(this, this.value);" />
<br/><br/>
<div class="label">Password:</div> <input id="password" type="password" onblur="javascript:Validator.validate(this, this.value);" />
<br/><br/>
<input type="submit" value="Register" id="submit" disabled />
<br/>
</form>
</div>