By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,701 Members | 1,966 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,701 IT Pros & Developers. It's quick & easy.

Error in Form Validation PHP/AJAX

ak1dnar
Expert 100+
P: 1,584
Hi, I got this scripts from this URL

There is Error when i submit the form.

Line: 54
Error: 'document.getElementbyID(....)' is null or not an object
What is this error.

Complete Files

index.php

[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" 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?validationtype=php" onSubmit="return validate();">
<table width="500">
<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">Required</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">Required</td>
</tr>

<tr>
<td><input type="submit" name="Submit" value="Submit" tabindex="5" /></td>
</tr>

</table>

</form>
</fieldset>
</body>


</html>
[/PHP]

formvalidation.php
[PHP]<?php
//After the form is submitted or onblur, request the validation type
$validationtype = $_GET["validationtype"]; //validationtype is ajax or php
$continueSubmit = true ; //global var if the form is valid. used only for php validationtype.

switch ($validationtype)
{
case 'ajax':
ProcessAjax(); //if validationtype is ajax go to processajax function
break;
case 'php':
processPHP();//if it is php call processphp runction
break;
}

function ProcessAjax()
{
$required = $_GET["sRequired"];//$required holds if the field is required. will be "required" or "notrequired"
$typecheck = $_GET["sTypeCheck"];//$typecheck holds additional requirements like email or phone
$val = $_GET["val"];

//validateRequired checks if it is required and then sends back feedback
validateRequired($required,$val,$typecheck);

/*check to see which typecheck (eg. email, date, etc.) was entered as the second variable in the validateMe() function
check the different cases passed in from the validateMe function. Send back the appropriate information*/
switch ($typecheck)
{
case 'date':
validateDate($val);
break;
case 'email':
validateEmail($val);
break;
}
}

//If the url string value for validationtype was PHP, you will be validating through this server side function
function processPHP()
{
//request the forms variables
$user = $_POST["user"];
$email= $_POST["email"];
global $continueSubmit;

//check to see if the different form fields are valid
echo "Username: ";
validateRequired("required", $user, "none");//validate user
echo "<br />";

echo "Email: ";
validateEmail($email) ;//validate email

//if continue is not 0 then continue with the form submission
if ($continueSubmit)
{
//submit your form
}

}

//--------------------------VALIDATION FUNCTIONS -----------------

//Function to validate if the field is required. It just checks to see if the field is empty.
function validateRequired($required,$val,$typecheck)
{

// if it is required check to see if it validates
if ($required == "required")
{
if ($val == "")
{
// if val is blank then then the field is invalid
echo "Required";
exit(); //we do not need to check for anything else so exit the validation
}

if ($val !== "" && $typecheck == "none")
{
// if val is not blank and there are no further validation checks ("none") respond with a thank you for feedback
echo "Thank You";
}
}
// if it is not required or typecheck is not none, the script will continue to validate
}


function validateEmail($val)
{
global $continueSubmit ;
// check the email address with a regex function
//regular expression is from http://regexlib.com/.
//To learn more about them, http://www.silverstones.com/thebat/Regex.html#intro has a pretty good tutorial
if (ereg ("^([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$", $val, $regs))
{
echo "Thank You";
}
else
{
$continueSubmit = false;
echo "Invalid Email Address";
}
}
[/PHP]

validate.js

Expand|Select|Wrap|Line Numbers
  1. window.onload = attachFormHandlers;
  2.  
  3. var gShow; //variable holding the id where feedback will be sent to.
  4. var sUrl = "formvalidation.php?validationtype=ajax&val=";//url is the page which will be processing all of the information.  it is important to make sure validationtype is ajax
  5. var gErrors = 0; //number of errors is set to none to begin with
  6. var http = getHTTPObject();//don't worry about this
  7.  
  8.  
  9.  
  10. function attachFormHandlers()
  11. {
  12.     var form = document.getElementById('form1') 
  13.  
  14.     if (document.getElementsByTagName)//make sure were on a newer browser
  15.     {
  16.         var objInput = document.getElementsByTagName('input');
  17.         for (var iCounter=0; iCounter<objInput.length; iCounter++)
  18.         objInput[iCounter].onblur = function(){return validateMe(this);} //attach the onchange to each input field
  19.     }
  20.     form.onsubmit = function(){return validate();} //attach validate() to the form
  21. }
  22.  
  23.  
  24.  
  25.  
  26. /*validateMe is the function called with onblur each time the user leaves the input box
  27. 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*/
  28. function validateMe(objInput) {
  29.  
  30.     sVal = objInput.value; //get value inside of input field
  31.  
  32.     sRules = objInput.className.split(' '); // get all the rules from the input box classname
  33.     sRequired = sRules[1]; // determines if field is required or not
  34.     sTypeCheck = sRules[2]; //typecheck are additional validation rules (ie. email, phone, date)
  35.     gShow = sRules[3]; //gShow is the td id where feedback is sent to.
  36.  
  37.     //sends the rules and value to the asp page to be validated
  38.     http.open("GET", sUrl + (sVal) + "&sRequired=" + (sRequired) + "&sTypeCheck=" + sTypeCheck, true);
  39.  
  40.     http.onreadystatechange = handleHttpResponse;     // handle what to do with the feedback 
  41.     http.send(null);  
  42. }
  43.  
  44.  
  45. function handleHttpResponse() {
  46.     //if the process is completed, decide to do with the returned data
  47.     if (http.readyState == 4) 
  48.       {
  49.  
  50.           sResults = http.responseText.split(","); //results is now whatever the feedback from the asp page was
  51.         //whatever the variable glo_show's (usermsg for example) innerHTML holds, is now whatever  was returned by the asp page. 
  52.         document.getElementById(gShow).innerHTML = "";
  53.         document.getElementById(gShow).appendChild(document.createTextNode(sResults[0]));
  54.       }
  55. }
  56.  
  57.  
  58. function validate()
  59. {
  60. var tables; 
  61.  
  62. tables = document.getElementsByTagName('td')
  63.  
  64.     for (i=0; i<tables.length; i++)//loop through all the <td> elements 
  65.     {
  66.         // if the class name of that td element is rules check to see if there are error warnings
  67.         if (tables[i].className == "rules")
  68.         {
  69.             //if there is a thank you or its blank then it passes
  70.             if (tables[i].innerHTML == 'Thank You' || tables[i].innerHTML == '' )
  71.             {
  72.                 tables[i].style.color = '#000000';//the color is changed to black or stays black
  73.             }
  74.             else
  75.             {
  76.                 gErrors = gErrors + 1; //the error count increases by 1
  77.                 tables[i].style.color = '#ff0000';//error messages are changed to red
  78.             }
  79.         }
  80.     }
  81.  
  82.     if (gErrors > 0)
  83.     {
  84.         //if there are any errors give a message
  85.         alert ("Please make sure all fields are properly completed.  Errors are marked in red!");
  86.         gErrors = 0;// reset errors to 0
  87.         return false;
  88.     }
  89.     else return true;
  90.  
  91. }
  92.  
  93.  
  94. function getHTTPObject() {
  95.     var xmlhttp;
  96.     /*@cc_on
  97.     @if (@_jscript_version >= 5)
  98.     try {
  99.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  100.     } catch (e) {
  101.       try {
  102.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  103.       } catch (E) {
  104.         xmlhttp = false;
  105.       }
  106.     }
  107.   @else
  108.   xmlhttp = false;
  109.   @end @*/
  110.     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  111.         try 
  112.         {
  113.             xmlhttp = new XMLHttpRequest();
  114.         } catch (e) {
  115.         xmlhttp = false;
  116.         }
  117.     }
  118.     return xmlhttp;
  119. }
Mar 22 '07 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
document.getElementById perhaps? (unless it was a typo here).
Mar 22 '07 #2

ak1dnar
Expert 100+
P: 1,584
document.getElementById perhaps? (unless it was a typo here).
Sorry Acoder I didn't get you.
Mar 22 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Sorry Acoder I didn't get you.
Your error is:
Line: 54
Error: 'document.getElementbyID(....)' is null or not an object
The 'b' should be a capital 'B', but I wasn't sure if you'd typed it out here incorrectly or whether it really was that mistake.
Mar 22 '07 #4

ak1dnar
Expert 100+
P: 1,584
Sorry Its my mistake. these scripts are working but once i submit the page with out values this error will come.

Line: 59
Char: 6
Error: 'document.getElementById(...)'is null or not an object.
Code:0

Again there is another bug, once i submit the page with correct values second page will appear. but when i press the back button and go back to the page same values are there but when i submit Validation errors will generate.
Mar 22 '07 #5

P: 3
Hi There

Itīs a bit late comming in to this question now but still I have the same problem and maybe have som extra information.

The error Error: 'document.getElementById(...)'is null or not an object
only happend when you are not entering any information into a field that is NOT reqiured to be filled in and thereby not validated.

Sounds strange to me, but that is how it works out for me. Still the error is there but itīs less of an problem now. I know, it didnīt cure the problem but it made it easier to live with.

If someone has the real cure to this problem I would be greatful because I just simply cant figure it out.
Aug 18 '07 #6

100+
P: 228
jx2
line 53 in *.js file there is unnecesary space

document.getElementById(gShow).appendChild(documen t.createTextNode(sResults[0]));

documen t.createT...

?
Aug 18 '07 #7

P: 3
Nop, thatīs not it since I allready fixed that in my .js file. But thanks for your reply.
Aug 20 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.