Registration validation problem
Posted: Thu Mar 12, 2009 12:45 am
Hello,
I've a registration form for accepting the username,password,email address etc. And I've validated the fields with ajax. Now I've a problem that when I submit the button, without validating the fields with ajax functions, the form is registering.
I mean to say that if I'm not correctly entering the fields also, it is saying that "registration is successful and you can login".
These are my ajax functions,
<script type="text/javascript">
function writediv(texte)
{
document.getElementById('loginbox').innerHTML = texte;
}
function verifLogin(username)
{
if(username != '')
{
if(username.length<5)
writediv('<span style="color:#cc0000"><b>'+username+' :</b> is too short !</span>');
else if(username.length>25)
writediv('<span style="color:#cc0000"><b>'+username+' :</b> is too long !</span>');
else if(texte = file('stud_veriflogin.php?username='+escape(username)))
{
if(texte == 1)
writediv('<span style="color:#cc0000">'+username+' : is already used !</span>');
else if(texte == 2)
writediv('<span style="color:#006600">'+username+' : is Available !</span>');
else
writediv(texte);
}
}
}
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
-----------------------------------------------------------------------
function AjaxEmail(email)
{
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;
}
}
var url="stud_email-ajax.php";
url=url+"?email="+email;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
-----------------------------------------------------------------------------------
function validatePassword()
{
var pwd1 = document.getElementById('password');
var test = true;
//If password is less than 6 characters
if(pwd1.value.length < 6)
test = false;
if(test) //validation passed
{
//Change input background green
//pwd1.style.backgroundColor = 'green';
document.getElementById("passwordbox").innerHTML="<img src=./images/tick1.png width=20 height=20> <font color:green>Password length is Ok</font>";
}
else //Validation failed
{
//Change input background red
//pwd1.style.backgroundColor = 'red';
document.getElementById("passwordbox").innerHTML="<font color:red>Passwords length should be atleast 6 characters</font>";
}
//var pwd2 = document.getElementById('conf_password');
}
-----------------------------------------------------------------------------------
function ajaxPassword()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(document.registerform.password.value == document.registerform.conf_password.value)
{
document.getElementById("row21").innerHTML="<img src=./images/tick1.png width=20 height=20> <font color:green>Passwords are matching</font>";
document.getElementById("row22").innerHTML="";
}
else
{
document.getElementById("row21").innerHTML="<img src=./images/cross.gif width=25 height=25> ";
document.getElementById("row22").innerHTML="<font color:red>The passwords do not match. Please re-enter the passwords.</font>";
}
}
}
xmlHttp.open("GET","tab.html",true);
xmlHttp.send(null);
}
</script>
And here is my registration form,
<form method="post" action="stud_reg.php" name="registerform" id="registerform">
<fieldset>
<table align="left" style="margin-top:-150px";>
<tr>
<td width="170"><label for="username">Username <sup style="color:red">*</sup></label>
</td>
<td width="129"><input type="text" name="username" id="username" onkeyup="verifLogin(this.value)"/>
<span id="row11"></span></td>
<br />
<td><div id="loginbox"><br />
</div></td>
<td width="158"></td>
</tr>
<tr>
<td><label for="password">Password <sup style="color:red">*</sup></label>
</td>
<td><input type="password" name="password" id="password" onkeyup="validatePassword();"/></td>
<br />
<td><div id="passwordbox"><br />
</div></td>
</tr>
<tr>
<td><label for="conf_password">Confirm Password <sup style="color:red">*</sup></label>
</td>
<td><input type="password" name="conf_password" id="conf_password" onchange="ajaxPassword();"/></td>
<br />
<td><span id="row21"></span><span id="row22"></span></td>
</tr>
<tr>
<td><label for="email">Email Address <sup style="color:red">*</sup></label>
</td>
<td><input type="text" name="email" id="email" onblur="AjaxEmail(this.value);"/></td>
<br />
<td><div id="msg"></div></td>
</tr>
<tr>
<td><label for="sex">Sex</label>
</td>
<td><input type="radio" name="sex" id="male" value="m" checked/>
Male
<input type="radio" name="sex" id="female" value="f"/>
Female</td>
</tr>
<tr>
<td><label for="College">College <sup style="color:red">*</sup></label>
</td>
<td><input type="text" name="college" id="college" /></td>
<br />
</tr>
<tr>
<td><label for="Stream">Stream <sup style="color:red">*</sup></label>
</td>
<td><input type="text" name="stream" id="stream" /></td>
<br />
</tr>
<tr>
<td><label for="specialization">Specialization <sup style="color:red">*</sup></label></td>
<td><input type="text" name="specialization" id="specialization" /></td>
<br />
</tr>
<tr>
<td><label for="yog">Year of Graduation <sup style="color:red">*</sup></label></td>
<td><select name="yog" id="yog" value="year">
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</td>
</tr>
<tr>
<td height="30">
<input type="submit" name="register" id="register" value="Register" />
</td>
</tr>
</table>
</form>
Can you please tell where is the problem and what's the solution for it?
I've a registration form for accepting the username,password,email address etc. And I've validated the fields with ajax. Now I've a problem that when I submit the button, without validating the fields with ajax functions, the form is registering.
I mean to say that if I'm not correctly entering the fields also, it is saying that "registration is successful and you can login".
These are my ajax functions,
<script type="text/javascript">
function writediv(texte)
{
document.getElementById('loginbox').innerHTML = texte;
}
function verifLogin(username)
{
if(username != '')
{
if(username.length<5)
writediv('<span style="color:#cc0000"><b>'+username+' :</b> is too short !</span>');
else if(username.length>25)
writediv('<span style="color:#cc0000"><b>'+username+' :</b> is too long !</span>');
else if(texte = file('stud_veriflogin.php?username='+escape(username)))
{
if(texte == 1)
writediv('<span style="color:#cc0000">'+username+' : is already used !</span>');
else if(texte == 2)
writediv('<span style="color:#006600">'+username+' : is Available !</span>');
else
writediv(texte);
}
}
}
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
-----------------------------------------------------------------------
function AjaxEmail(email)
{
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;
}
}
var url="stud_email-ajax.php";
url=url+"?email="+email;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
-----------------------------------------------------------------------------------
function validatePassword()
{
var pwd1 = document.getElementById('password');
var test = true;
//If password is less than 6 characters
if(pwd1.value.length < 6)
test = false;
if(test) //validation passed
{
//Change input background green
//pwd1.style.backgroundColor = 'green';
document.getElementById("passwordbox").innerHTML="<img src=./images/tick1.png width=20 height=20> <font color:green>Password length is Ok</font>";
}
else //Validation failed
{
//Change input background red
//pwd1.style.backgroundColor = 'red';
document.getElementById("passwordbox").innerHTML="<font color:red>Passwords length should be atleast 6 characters</font>";
}
//var pwd2 = document.getElementById('conf_password');
}
-----------------------------------------------------------------------------------
function ajaxPassword()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(document.registerform.password.value == document.registerform.conf_password.value)
{
document.getElementById("row21").innerHTML="<img src=./images/tick1.png width=20 height=20> <font color:green>Passwords are matching</font>";
document.getElementById("row22").innerHTML="";
}
else
{
document.getElementById("row21").innerHTML="<img src=./images/cross.gif width=25 height=25> ";
document.getElementById("row22").innerHTML="<font color:red>The passwords do not match. Please re-enter the passwords.</font>";
}
}
}
xmlHttp.open("GET","tab.html",true);
xmlHttp.send(null);
}
</script>
And here is my registration form,
<form method="post" action="stud_reg.php" name="registerform" id="registerform">
<fieldset>
<table align="left" style="margin-top:-150px";>
<tr>
<td width="170"><label for="username">Username <sup style="color:red">*</sup></label>
</td>
<td width="129"><input type="text" name="username" id="username" onkeyup="verifLogin(this.value)"/>
<span id="row11"></span></td>
<br />
<td><div id="loginbox"><br />
</div></td>
<td width="158"></td>
</tr>
<tr>
<td><label for="password">Password <sup style="color:red">*</sup></label>
</td>
<td><input type="password" name="password" id="password" onkeyup="validatePassword();"/></td>
<br />
<td><div id="passwordbox"><br />
</div></td>
</tr>
<tr>
<td><label for="conf_password">Confirm Password <sup style="color:red">*</sup></label>
</td>
<td><input type="password" name="conf_password" id="conf_password" onchange="ajaxPassword();"/></td>
<br />
<td><span id="row21"></span><span id="row22"></span></td>
</tr>
<tr>
<td><label for="email">Email Address <sup style="color:red">*</sup></label>
</td>
<td><input type="text" name="email" id="email" onblur="AjaxEmail(this.value);"/></td>
<br />
<td><div id="msg"></div></td>
</tr>
<tr>
<td><label for="sex">Sex</label>
</td>
<td><input type="radio" name="sex" id="male" value="m" checked/>
Male
<input type="radio" name="sex" id="female" value="f"/>
Female</td>
</tr>
<tr>
<td><label for="College">College <sup style="color:red">*</sup></label>
</td>
<td><input type="text" name="college" id="college" /></td>
<br />
</tr>
<tr>
<td><label for="Stream">Stream <sup style="color:red">*</sup></label>
</td>
<td><input type="text" name="stream" id="stream" /></td>
<br />
</tr>
<tr>
<td><label for="specialization">Specialization <sup style="color:red">*</sup></label></td>
<td><input type="text" name="specialization" id="specialization" /></td>
<br />
</tr>
<tr>
<td><label for="yog">Year of Graduation <sup style="color:red">*</sup></label></td>
<td><select name="yog" id="yog" value="year">
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</td>
</tr>
<tr>
<td height="30">
<input type="submit" name="register" id="register" value="Register" />
</td>
</tr>
</table>
</form>
Can you please tell where is the problem and what's the solution for it?