1,584
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
- window.onload = attachFormHandlers;
- var gShow; //variable holding the id where feedback will be sent to.
- 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
- var gErrors = 0; //number of errors is set to none to begin with
- var http = getHTTPObject();//don't worry about this
- function attachFormHandlers()
- {
- var form = document.getElementById('form1')
- if (document.getElementsByTagName)//make sure were on a newer browser
- {
- var objInput = document.getElementsByTagName('input');
- for (var iCounter=0; iCounter<objInput.length; iCounter++)
- objInput[iCounter].onblur = function(){return validateMe(this);} //attach the onchange to each input field
- }
- form.onsubmit = function(){return validate();} //attach validate() to the form
- }
- /*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) {
- sVal = objInput.value; //get value inside of input field
- sRules = objInput.className.split(' '); // get all the rules from the input box classname
- sRequired = sRules[1]; // determines if field is required or not
- sTypeCheck = sRules[2]; //typecheck are additional validation rules (ie. email, phone, date)
- gShow = sRules[3]; //gShow is the td id where feedback is sent to.
- //sends the rules and value to the asp page to be validated
- 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 the process is completed, decide to do with the returned data
- if (http.readyState == 4)
- {
- sResults = http.responseText.split(","); //results is now whatever the feedback from the asp page was
- //whatever the variable glo_show's (usermsg for example) innerHTML holds, is now whatever was returned by the asp page.
- document.getElementById(gShow).innerHTML = "";
- document.getElementById(gShow).appendChild(document.createTextNode(sResults[0]));
- }
- }
- function validate()
- {
- var tables;
- tables = document.getElementsByTagName('td')
- for (i=0; i<tables.length; i++)//loop through all the <td> elements
- {
- // if the class name of that td element is rules check to see if there are error warnings
- if (tables[i].className == "rules")
- {
- //if there is a thank you or its blank then it passes
- if (tables[i].innerHTML == 'Thank You' || tables[i].innerHTML == '' )
- {
- tables[i].style.color = '#000000';//the color is changed to black or stays black
- }
- else
- {
- gErrors = gErrors + 1; //the error count increases by 1
- tables[i].style.color = '#ff0000';//error messages are changed to red
- }
- }
- }
- if (gErrors > 0)
- {
- //if there are any errors give a message
- alert ("Please make sure all fields are properly completed. Errors are marked in red!");
- gErrors = 0;// reset errors to 0
- return false;
- }
- else return true;
- }
- function getHTTPObject() {
- var xmlhttp;
- /*@cc_on
- @if (@_jscript_version >= 5)
- try {
- xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (E) {
- xmlhttp = false;
- }
- }
- @else
- xmlhttp = false;
- @end @*/
- if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
- try
- {
- xmlhttp = new XMLHttpRequest();
- } catch (e) {
- xmlhttp = false;
- }
- }
- return xmlhttp;
- }
