basic-javascript-16-validate-form.htm / htm
<html>
<head>
<title>Form Field Validation</title>
<style type="text/css">
.fieldname
{
text-align: right;
}
.submit
{
text-align: right;
}
</style>
<script type="text/javascript" src="HttpRequest.js"></script>
<script type="text/javascript">
function checkUsername()
{
var userValue = document.getElementById("username").value;
if (userValue == "")
{
alert("Please enter a user name to check!");
return;
}
var url = "formvalidator.php?username=" + userValue;
var request = new HttpRequest(url, checkUsername_callBack);
request.send();
}
function checkUsername_callBack(sResponseText)
{
var userValue = document.getElementById("username").value;
if (sResponseText == "available")
{
alert("The username " + userValue + " is available!");
}
else
{
alert("We're sorry, but " + userValue + " is not available.");
}
}
function checkEmail()
{
var emailValue = document.getElementById("email").value;
if (emailValue == "")
{
alert("Please enter an email address to check!");
return;
}
var url = "formvalidator.php?email=" + emailValue;
var request = new HttpRequest(url, checkEmail_callBack);
request.send();
}
function checkEmail_callBack(sResponseText)
{
var emailValue = document.getElementById("email").value;
if (sResponseText == "available")
{
alert("The email " + emailValue + " is currently not in use!");
}
else
{
alert("I'm sorry, but " + emailValue + " is in use by another user.");
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td class="fieldname">
Username:
</td>
<td>
<input type="text" id="username" />
</td>
<td>
<a href="javascript: checkUsername()">Check Availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
Email:
</td>
<td>
<input type="text" id="email" />
</td>
<td>
<a href="javascript: checkEmail()">Check Availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
Password:
</td>
<td>
<input type="text" id="password" />
</td>
<td />
</tr>
<tr>
<td class="fieldname">
Verify Password:
</td>
<td>
<input type="text" id="password2" />
</td>
<td />
</tr>
<tr>
<td colspan="2" class="submit">
<input type="submit" value="Submit" />
</td>
<td />
</tr>
</table>
</form>
</body>
</html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
