<html>
<head>
<title>Using Ajax for validation</title>
</head>
<script language="javascript" type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function validate()
{
createXMLHttpRequest();
var date=document.getElementById("birthDate");
var url="validationserver.php?birthDate="+escape(date.value);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function handleStateChange()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var mes=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
/*
var mes="this is a test!";
var val=false;
*/
setMessage(mes,val);
}
}
}
function setMessage(mes,val)
{
var messageArea=document.getElementById("dateMessage");
var fontColor="red";
if(val=="true")
{
fontColor="green";
}
messageArea.innerHTML="<font color="+fontColor+">"+mes+"</font>";
}
</script>
<body>
<h1>Ajax Validation Example</h1>
Birth date:<input type="text" size="10" id="birthDate" onchange="validate();"/>
Example:2001-11-12
<div id="dateMessage"></div>
</body>
</html>
<?php
if($_GET['birthDate']=="")
{
$message="You have entered a invalid date";
$passed=false;
}
else
{
$birthDate=$_GET['birthDate'];
$date=explode('-',$birthDate);
if(checkdate($date[1],$date[2],$date[0]))
{
$message="You have entered a valid date";
$passed=true;
}
else
{
$message="You have entered a invalid date";
$passed=false;
}
}
echo "<response>";
echo "<passed>".$passed."</passed>";
echo "<message>".$message."</message>";
echo "</response>";
?>
