3
Hello Everyone,
With that alert statment alert("calling validateme for "+document.form1.elements[iCounter]); in js things would work fine but if i remoe the form is simply getting submitted in firebug i can see some error popping up like uncaught exception ...just care to look in code nad let me know if u found something
PHP file to handle resquest
<?php
/*This is a dummy code to handle the request*/
$method=$_POST["req"];
if($method=='POST')
{
$required = $_POST["sRequired"];
$typecheck = $_POST["sTypeCheck"];
$val = $_POST["val"];
}else
{
$required = $_GET["sRequired"];
$typecheck = $_GET["sTypeCheck"];
$val = $_GET["val"];
}
$res='';
if($typecheck=='email' && !empty($val))
{
$resq=validateEmail($val);
}
if(empty($val) && $required=='required')
{
$res='Required Fields';
}
else
{
if(empty($res))
$res=$resq;
else
$res='OK';
}
echo trim($res);
function validateEmail($val)
{
if (ereg ("^([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$", $val))
{
$em='OK';
}
else
{
$em="Invalid Email Address";
}
return $em;
}
?>
index.html
<!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" xml:lang="en" lang="en">
<head>
<title>Ajax Form</title>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<fieldset>
<legend>Ajax Form</legend>
<form name="form1" id="form1" method="post" action="formvalidation.php" onSubmit="javascript: return attachFormHandlers();">
<table width="500">
<tr><td><div id="gShow"></div></td></tr>
<tr>
<td width="130">Username </td>
<td width="170"><input type="text" name="user" tabindex="1" id="user" class="validate required none usermsg"/></td>
<td id ="usermsg" class="rules"></td>
</tr>
<tr>
<td>Email </td>
<td><input type="text" name="email" tabindex="2" id="email" class="validate required email emailmsg" /></td>
<td id="emailmsg" class="rules"></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" tabindex="5" /></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
javascript
//window.onload = attachFormHandlers;
var gShow; //error handling
var sUrl = "formvalidation.php?validationtype=ajax&val=";
var gErrors = 0;
var http
http = getHTTPObject();
function attachFormHandlers()
{
//alert("in attach");
var form = document.getElementById('form1');
if (document.getElementsByTagName)
{
var objInput = document.getElementsByTagName('input');
for (var iCounter=0; iCounter<form.length; iCounter++)
{
if(document.form1.elements[iCounter].type=='text')
{
alert("calling validateme for "+document.form1.elements[iCounter]);
validateMe(document.form1.elements[iCounter]);
}
}
}
if(gErrors<=0)
{
document.form1.submit();
return false;
}
else
{
alert("Fill all Required fields");
return false;
}
}
/*validateMe is the function called with onblur each time the user leaves the input box
passed into it is the value entered, the rules (which you could create your own), and the id of the area the results will show in*/
function validateMe(objInput) {
var str;
sVal = objInput.value;
//alert(sVal);
sRules = objInput.className.split(' ');
sRequired = encodeURI(sRules[1]);
sTypeCheck = encodeURI(sRules[2]); //typecheck are additional validation rules (ie. email, phone, date)
gShow = sRules[3];
/*Post*/
str=sUrl + sVal + "&sRequired=" + (sRequired) + "&sTypeCheck=" + sTypeCheck + "&req=POST";
http.open("POST","formvalidation.php",true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.setRequestHeader("Content-length",str.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange=handleHttpResponse;
http.send(str);
/*GET
http.open("GET", sUrl + (sVal) + "&sRequired=" + (sRequired) + "&sTypeCheck=" + sTypeCheck, true);
http.onreadystatechange = handleHttpResponse; // handle what to do with the feedback
http.send(null); */
}
function handleHttpResponse() {
if (http.readyState == 4)
{
if(http.status == 200)
{
sResults = http.responseText.split(","); //results is now whatever the feedback from
if(sResults[0] != 'OK')
{
gErrors = gErrors + 1;
document.getElementById(gShow).innerHTML=http.resp onseText;
return false;
}
}
else if (http.status == 404)
{
alert ("Requested URL is not found.");
return false;
}
else if (http.status == 403)
{
alert("Access denied.");
return false;
}
else
{
document.getElementById(gShow).innerHTML="status is : "+http.status;
return false;
}
}
return false;
}
function getHTTPObject() {
var xmlhttp=null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
please look in these file and let me known if u found me wrong on smallest or sillest things
Would be a great help
Regards,
