ajax validation

abs0lut · October 26, 2008

ajax.js

var xmlHttp

function checkForm(str, id)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
		alert ("Browser does not support HTTP Request")
		return
	}
var url="AJAX.php?q="+str+"&id="+id
xmlHttp.onreadystatechange = function()
    {
    	if(xmlHttp.readyState==4)
	{
		text = xmlHttp.responseText
			document.getElementById(id).style.borderColor = text.substring(0,7);
		document.getElementById(id+"v").innerHTML = text.substring(
		if(id == "pass1" & document.getElementById("rpass").value != "")
		{
			checkForm(document.getElementById("rpass").value, "rpass");
		}
	}
}
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
	{ 
	xmlHttp=new XMLHttpRequest();
	}
catch (e)
	{
		try
  		{
  			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  		}
		catch (e)
  		{
  			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
 }
return xmlHttp;
}

function ClearBox()
{
document.getElementById("user").value = ""
document.getElementById("mail").value = ""
document.getElementById("fdate").value = "m - d - Y"
SetTimer();
}

function SetTimer()
{
timers=GetXmlHttpObject()
if (timers==null)
{
		alert ("Browser does not support HTTP Request")
		return
	}
var url="AJAX.php?act=time"
timers.onreadystatechange = function()
    {
    	if(timers.readyState==4)
	{
		document.getElementById("timer").innerHTML = timers.responseText
	}
}
timers.open("GET",url,true)
timers.send(null)
setTimeout("SetTimer()", 1000);
}

function SetDate(format)
{
dates=GetXmlHttpObject()
if (timers==null)
{
		alert ("Browser does not support HTTP Request")
		return
	}
var url="AJAX.php?act=date&f="+format
dates.onreadystatechange = function()
    {
    	if(dates.readyState==4)
	{
		document.getElementById("date").innerHTML = dates.responseText
	}
}
dates.open("GET",url,true)
dates.send(null)
}

ajax.php

<?php session_start();
if(isset($_GET['q'])){ $q = $_GET['q']; }
if(isset($_GET['id'])){ $id = $_GET['id']; }

if(isset($_GET['act'])){ $act = $_GET['act']; }

$con = mysql_connect('localhost', 'root', '');
if (!$con){ die('Could not connect: ' . mysql_error()); }
mysql_select_db("validator", $con);

if($id == "user")
{
$sql="SELECT * FROM users WHERE username = '$q'";
$result = mysql_query($sql);
$rows = mysql_num_rows($result);
if(strlen($q) < 4 || strlen($q) > 25)
{
	echo "#FF0000 <img src=\"images/bad.gif\" />Username must be between 4 - 25 characters long.";
}
elseif($rows > 0)
{
	echo "#FF0000 <img src=\"images/bad.gif\" />That username is in use.";
}
else
{
	echo "#00FF00 <img src=\"images/good.gif\" />";
}
}

elseif($id == "pass1")
{
$_SESSION['p1'] = $q;

if(strlen($q) < 4 || strlen($q) > 30)
{
	echo "#FF0000 <img src=\"images/bad.gif\" />Password must be between 4 - 30 characters long.";
}
else
{
	echo "#00FF00 <img src=\"images/good.gif\" />";
}
}
elseif($id == "rpass")
{
if($q != $_SESSION['p1'])
{
	echo "#FF0000 <img src=\"images/bad.gif\" />Passwords do not match.";
}
else
{
	echo "#00FF00 <img src=\"images/good.gif\" />";
}
}
elseif($id == "mail")
{
$sql="SELECT * FROM users WHERE user_email = '$q'";
$result = mysql_query($sql) or die(mysql_error());
$rows = mysql_num_rows($result);
if($rows > 0)
{
	echo "#FF0000 <img src=\"images/bad.gif\" />That email is already registered.";
}
elseif(!eregi("^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$", $q))
{
	echo "#FF0000 <img src=\"images/bad.gif\" />That email is invalid.";
}
else
{
	echo "#00FF00 <img src=\"images/good.gif\" />";
}
}
else
{
if($act == "time")
{
	echo date("h:i:s a", time());
}
elseif($act == "date")
{
	$format = $_GET['f'];
	echo date($format);
}
}
mysql_close($con);
?>

AJAX_Register.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="AJAX.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registration</title>
</head>
<body onload="ClearBox()">
<form action="register.php" method="post" name="Register"> 
<table bgcolor="#CCCCCC" width="640" align="center" cellpadding="2px">
<tr valign="middle">
<td>
    	<table align="center" width="630" style="border-collapse:collapse;">
         <tr bgcolor="#CCCCCC">
	 	<td align="center" class="inside" bgcolor="#FFFFFF"><label class="title">AJAX Validator v1.00</label></td>
         </tr>
         <tr bgcolor="#CCCCCC">
         	<td> </td>
         </tr>
	 </table>
	<table align="center" width="630" bgcolor="#FFFFFF" style="border:solid 1px #666666; border-collapse:collapse;">
        <tr>
        	<td width="300" align="right" class="inside"><label>Username: <input type="text" name="user" id="user" style="border-style: solid; border-width:1px;" onchange="checkForm(this.value, this.id)" /></label></td><td align="left" class="inside"><label id="userv" class="error"></label></td>
         </tr>
         <tr>
         	<td width="300" align="right" class="inside"><label>Password: <input type="password" name="pass1" id="pass1" style="border-style: solid; border-width:1px;" onchange="checkForm(this.value, this.id)" /></label></td><td align="left" class="inside"><label id="pass1v" class="error"></label></td>
         </tr>
         <tr>
         	<td width="300" align="right" class="inside"><label>Re-Type Password: <input type="password" id="rpass" style="border-style: solid; border-width:1px;" onchange="checkForm(this.value, this.id)" /></label></td><td align="left" class="inside"><label id="rpassv" class="error"></label></td>
         </tr>
         <tr bgcolor="#CCCCCC">
         	<td> </td><td> </td>
         </tr>
         <tr>
         	<td width="300" align="right" class="inside"><label>Email: <input type="text" name="mail" id="mail" style="border-style: solid; border-width:1px;" onchange="checkForm(this.value, this.id)" /></label></td><td align="left" class="inside"><label id="mailv" class="error"></label></td>
         </tr>
         <tr bgcolor="#CCCCCC">
         	<td> </td><td> </td>
         </tr>
         <tr>
         	<td width="300" align="right" class="inside"><label>Time offset from server: <select name="time" style="border-style: solid; border-width:1px;text-align:right;">
                    <option value="+12">+12</option>
                    <option value="+11">+11</option>
                    <option value="+10">+10</option>
                    <option value="+9">+9</option>
                    <option value="+8">+8</option>
                    <option value="+7">+7</option>
                    <option value="+6">+6</option>
                    <option value="+5">+5</option>
                    <option value="+4">+4</option>
                    <option value="+3">+3</option>
                    <option value="+2">+2</option>
                    <option value="+1">+1</option>
                    <option value="0" selected="selected">0</option>
                    <option value="-1">-1</option>
                    <option value="-2">-2</option>
                    <option value="-3">-3</option>
                    <option value="-4">-4</option>
                    <option value="-5">-5</option>
                    <option value="-6">-6</option>
                    <option value="-7">-7</option>
                    <option value="-8">-8</option>
                    <option value="-9">-9</option>
                    <option value="-10">-10</option>
                    <option value="-11">-11</option>
                    <option value="-12">-12</option>
              	</select></label></td><td align="left" class="inside"><div id="timer" align="center"></div></td>
         </tr>
         <tr>
         	<td width="300" align="right" class="inside"><label>Date Format: <input type="text" id="fdate" value="m - d - Y" style="border-style: solid; border-width:1px;" onkeyup="SetDate(this.value)" /></label></td><td align="left" class="inside"><div id="date" align="center"><?php echo date("m - d - Y"); ?></div></td>
         </tr>
         </table>
         <table align="center" width="630" style="border-collapse:collapse;">
         <tr bgcolor="#CCCCCC">
         	<td> </td><td> </td><td> </td>
         </tr>
         <tr bgcolor="#CCCCCC">
	 	<td width="275"> </td><td width="50" align="center" class="inside" bgcolor="#FFFFFF"><label><input type="submit"  name="submit" value="Submit" /></label></td><td> </td>
         </tr>
	 </table>
</td>
</tr>
</table>
</form>
<div class="footer"><a href="http://pyr0.commoncritics.com" style="color: #666666;text-decoration: none;">Pyr0 Cre@tions<br /><label style="font-size: 8.5px;">Programmed by ©Todd Withers</label></a></div>
</body>
</html>

register.php

<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con){ die('Could not connect: ' . mysql_error()); }
mysql_select_db("validator", $con);
if(isset($_POST['submit'])){

$username = addslashes(trim($_POST['user']));
$email = addslashes(trim($_POST['mail']));
$pass = addslashes(trim($_POST['pass1']));
$date=date('Ymd');

$query = mysql_query("INSERT INTO users (username, password, user_email, date) VALUES ('$username','$pass','$email','$date')") or die(mysql_error());
if($query){
echo 'thanks for registering';
}
}
?>

the user could not submit if there are errors such as 'Username must be between 4 - 25 characters long', 'That username is in use', etc..

could you please help me?

abs0lut · October 28, 2008

bump, please help...

BoltZ · October 28, 2008

First of all try putting ; on the end of all your JavaScript lines.

Also so I can use error console can you post a link

Sign In

ajax validation

Recommended Posts

abs0lut

Link to comment

Share on other sites

abs0lut

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information