ajax form validation

Question

Hi, I have created a script which checks if an email is valid. I have another function which checks if a username is taken. When checking both textboxes I get 'error on page' if these are checked on there own it works fine.

Below is my code

<script type="text/javascript">
function AjaxFunction()
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{  
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
 try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck() 
{
if(httpxml.readyState==4)
{
document.getElementById("msg").innerHTML=httpxml.responseText;

}
}

httpxml.open("GET",ajax.php,true);
httpxml.send(null);
}
</script>

<form name=form action=''>
    Username <input type=text name=username onBlur="AjaxFunction();"><br><div id="msg"></br></div><br>
     Email Address<input type=text name=email onBlur="AjaxFunction();"><div id="msg"></div>
<br>
<input type=submit value=Submit >
</form>

This is my ajax.php file....note the function for checking is not on this page, I have simply used echo $username as an example of this not working.

<?

$username=$_GET['username']; 
echo $username;

$email = $_GET['email'];
if (!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$",     $email)){
echo "<font color=red> Invalid email</font>";
}else{
echo "<font color=green> Valid Email</font>";} 
?>

Thanks =)

Answer 1

I haven't checked but I think the two div's with the same id are the cause of your problem. Also, you might wanna consider doing the e-mail validation in a JavaScript function.

/Edit: I noticed this in your code:

<br><div id="msg"></br></div><br>

You shouldn't have HTML elements mixed up like that. Consider using a HTML validator, it will save you a lot of headache.