AJAX Form Validation - Learn step by step final part

12. The class that supports the validation functionality is called Validate, and it is hosted in a script file called validate.class.php, which looks like this:

<?php

// load error handler and database configuration

require_once ('config.php');

// Class supports AJAX and PHP web form validation

class Validate

{

// stored database connection

private $mMysqli;

// constructor opens database connection

function __construct()

{

$this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

}

// destructor closes database connection

function __destruct()

{

$this->mMysqli->close();

}

// supports AJAX validation, verifies a single value

public function ValidateAJAX($inputValue, $fieldID)

{

// check which field is being validated and perform validation

switch($fieldID)

{

// Check if the username is valid

case 'txtUsername':

return $this->validateUserName($inputValue);

break;

// Check if the name is valid

case 'txtName':

return $this->validateName($inputValue);

break;

// Check if a gender was selected

case 'selGender':

return $this->validateGender($inputValue);

break;

// Check if birth month is valid

case 'selBthMonth':

return $this->validateBirthMonth($inputValue);

break;

// Check if birth day is valid

case 'txtBthDay':

return $this->validateBirthDay($inputValue);

break;

// Check if birth year is valid

case 'txtBthYear':

return $this->validateBirthYear($inputValue);

break;

// Check if email is valid

case 'txtEmail':

return $this->validateEmail($inputValue);

break;

// Check if phone is valid

case 'txtPhone':

return $this->validatePhone($inputValue);

break;

// Check if "I have read the terms" checkbox has been checked

case 'chkReadTerms':

return $this->validateReadTerms($inputValue);

break;

}

}

// validates all form fields on form submit

public function ValidatePHP()

{

// error flag, becomes 1 when errors are found.

$errorsExist = 0;

// clears the errors session flag

if (isset($_SESSION['errors']))

unset($_SESSION['errors']);

// By default all fields are considered valid

$_SESSION['errors']['txtUsername'] = 'hidden';

$_SESSION['errors']['txtName'] = 'hidden';

$_SESSION['errors']['selGender'] = 'hidden';

$_SESSION['errors']['selBthMonth'] = 'hidden';

$_SESSION['errors']['txtBthDay'] = 'hidden';

$_SESSION['errors']['txtBthYear'] = 'hidden';

$_SESSION['errors']['txtEmail'] = 'hidden';

$_SESSION['errors']['txtPhone'] = 'hidden';

$_SESSION['errors']['chkReadTerms'] = 'hidden';

// Validate username

if (!$this->validateUserName($_POST['txtUsername']))

{

$_SESSION['errors']['txtUsername'] = 'error';

$errorsExist = 1;

}

// Validate name

if (!$this->validateName($_POST['txtName']))

{

$_SESSION['errors']['txtName'] = 'error';

$errorsExist = 1;

}

// Validate gender

if (!$this->validateGender($_POST['selGender']))

{

$_SESSION['errors']['selGender'] = 'error';

$errorsExist = 1;

}

// Validate birth month

if (!$this->validateBirthMonth($_POST['selBthMonth']))

{

$_SESSION['errors']['selBthMonth'] = 'error';

$errorsExist = 1;

}

// Validate birth day

if (!$this->validateBirthDay($_POST['txtBthDay']))

{

$_SESSION['errors']['txtBthDay'] = 'error';

$errorsExist = 1;

}

// Validate birth year and date

if (!$this->validateBirthYear($_POST['selBthMonth'] . '#' .

$_POST['txtBthDay'] . '#' .

$_POST['txtBthYear']))

{

$_SESSION['errors']['txtBthYear'] = 'error';

$errorsExist = 1;

}

// Validate email

if (!$this->validateEmail($_POST['txtEmail']))

{

$_SESSION['errors']['txtEmail'] = 'error';

$errorsExist = 1;

}

// Validate phone

if (!$this->validatePhone($_POST['txtPhone']))

{

$_SESSION['errors']['txtPhone'] = 'error';

$errorsExist = 1;

}

// Validate read terms

if (!isset($_POST['chkReadTerms']) ||

!$this->validateReadTerms($_POST['chkReadTerms']))

{

$_SESSION['errors']['chkReadTerms'] = 'error';

$_SESSION['values']['chkReadTerms'] = '';

$errorsExist = 1;

}

// If no errors are found, point to a successful validation page

if ($errorsExist == 0)

{

return 'allok.php';

}

else

{

// If errors are found, save current user input

foreach ($_POST as $key => $value)

{

$_SESSION['values'][$key] = $_POST[$key];

}

return 'index.php';

}

}

// validate user name (must be empty, and must not be already registered)

private function validateUserName($value)

{

// trim and escape input value

$value = $this->mMysqli->real_escape_string(trim($value));

// empty user name is not valid

if ($value == null)

return 0; // not valid

// check if the username exists in the database

$query = $this->mMysqli->query('SELECT user_name FROM users ' .

'WHERE user_name="' . $value . '"');

if ($this->mMysqli->affected_rows > 0)

return '0'; // not valid

else

return '1'; // valid

}

// validate name

private function validateName($value)

{

// trim and escape input value

$value = trim($value);

// empty user name is not valid

if ($value)

return 1; // valid

else

return 0; // not valid

}

// validate gender

private function validateGender($value)

{

// user must have a gender

return ($value == '0') ? 0 : 1;

}

// validate birth month

private function validateBirthMonth($value)

{

// month must be non-null, and between 1 and 12

return ($value == '' || $value > 12 || $value < 1) ? 0 : 1;

}

// validate birth day

private function validateBirthDay($value)

{

// day must be non-null, and between 1 and 31

return ($value == '' || $value > 31 || $value < 1) ? 0 : 1;

}

// validate birth year and the whole date

private function validateBirthYear($value)

{

// valid birth year is between 1900 and 2000

// get whole date (mm#dd#yyyy)

$date = explode('#', $value);

// date can't be valid if there is no day, month, or year

if (!$date[0]) return 0;

if (!$date[1] || !is_numeric($date[1])) return 0;

if (!$date[2] || !is_numeric($date[2])) return 0;

// check the date

return (checkdate($date[0], $date[1], $date[2])) ? 1 : 0;

}

// validate email

private function validateEmail($value)

{

// valid email formats: *@*.*, *@*.*.*, *.*@*.*, *.*@*.*.*)

return (!eregi('^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$', $value)) ? 0 : 1;

}

// validate phone

private function validatePhone($value)

{

// valid phone format: ###-###-####

return (!eregi('^[0-9]{3}-*[0-9]{3}-*[0-9]{4}$', $value)) ? 0 : 1;

}

// check the user has read the terms of use

private function validateReadTerms($value)

{

// valid value is 'true'

return ($value == 'true' || $value == 'on') ? 1 : 0;

}

}

?>

13. Test your script by loading http://localhost/ajax/validate/index.php in a web browser.

AJAX Form Validation - Learn step by step PART - 5

9. It's time to add the business logic now. Start by creating config.php, with this code in it:

<?php

// defines database connection data

define('DB_HOST', 'localhost');

define('DB_USER', 'ajaxuser');

define('DB_PASSWORD', 'practical');

define('DB_DATABASE', 'ajax');

?>

10. Now create the error handler code in a file named error_handler.php:

<?php

// set the user error handler method to be error_handler

set_error_handler('error_handler', E_ALL);

// error handler function

function error_handler($errNo, $errStr, $errFile, $errLine)

{

// clear any output that has already been generated

if(ob_get_length()) ob_clean();

// output the error message

$error_message = 'ERRNO: ' . $errNo . chr(10) .

'TEXT: ' . $errStr . chr(10) .

'LOCATION: ' . $errFile .

', line ' . $errLine;

echo $error_message;

// prevent processing any more PHP scripts

exit;

}

?>

11. The PHP script that handles the client's AJAX calls, and also handles the validation on form submit, is validate.php:

<?php

// start PHP session

session_start();

// load error handling script and validation class

require_once ('error_handler.php');

require_once ('validate.class.php');

// Create new validator object

$validator = new Validate();

// read validation type (PHP or AJAX?)

$validationType = '';

if (isset($_GET['validationType']))

{

$validationType = $_GET['validationType'];

}

// AJAX validation or PHP validation?

if ($validationType == 'php')

{

// PHP validation is performed by the ValidatePHP method, which returns

// the page the visitor should be redirected to (which is allok.php if

// all the data is valid, or back to index.php if not)

header("Location:" . $validator->ValidatePHP());

}

else

{

// AJAX validation is performed by the ValidateAJAX method. The results

// are used to form an XML document that is sent back to the client

$response =

'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' .

'<response>' .

'<result>' .

$validator->ValidateAJAX($_POST['inputValue'], $_POST['fieldID']) .

'</result>' .

'<fieldid>' .

$_POST['fieldID'] .

'</fieldid>' .

'</response>';

// generate the response

if(ob_get_length()) ob_clean();

header('Content-Type: text/xml');

echo $response;

}

?>

AJAX Form Validation - Learn step by step PART - 4

7. Create a new file named allok.php, and add the following code to it: <?php

// clear any data saved in the session

session_start();

session_destroy();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>AJAX Form Validation</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="validate.css" rel="stylesheet" type="text/css" />

</head>

<body>

Registration Successfull!<br />

<a href="index.php" title="Go back"><< Go back</a>

</body>

</html>

8. Create a file named validate.js. This file performs the client-side functionality, including the AJAX requests:

// holds an instance of XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

// holds the remote server address

var serverAddress = "validate.php";

// when set to true, display detailed error messages

var showErrors = true;

// initialize the validation requests cache

var cache = new Array();

// creates an XMLHttpRequest instance

function createXmlHttpRequestObject()

{

// will store the reference to the XMLHttpRequest object

var xmlHttp;

// this should work for all browsers except IE6 and older

try

{

// try to create XMLHttpRequest object

xmlHttp = new XMLHttpRequest();

}

catch(e)

{

// assume IE6 or older

var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",

"MSXML2.XMLHTTP.5.0",

"MSXML2.XMLHTTP.4.0",

"MSXML2.XMLHTTP.3.0",

"MSXML2.XMLHTTP",

"Microsoft.XMLHTTP");

// try every id until one works

for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)

{

try

{

// try to create XMLHttpRequest object

xmlHttp = new ActiveXObject(XmlHttpVersions[i]);

}

catch (e) {} // ignore potential error

}

}

// return the created object or display an error message

if (!xmlHttp)

displayError("Error creating the XMLHttpRequest object.");

else

return xmlHttp;

}

// function that displays an error message

function displayError($message)

{

// ignore errors if showErrors is false

if (showErrors)

{

// turn error displaying Off

showErrors = false;

// display error message

alert("Error encountered: \n" + $message);

// retry validation after 10 seconds

setTimeout("validate();", 10000);

}

}

// the function handles the validation for any form field

function validate(inputValue, fieldID)

{

// only continue if xmlHttp isn't void

if (xmlHttp)

{

// if we received non-null parameters, we add them to cache in the

// form of the query string to be sent to the server for validation

if (fieldID)

{

// encode values for safely adding them to an HTTP request query string

inputValue = encodeURIComponent(inputValue);

fieldID = encodeURIComponent(fieldID);

// add the values to the queue

cache.push("inputValue=" + inputValue + "&fieldID=" + fieldID);

}

// try to connect to the server

try

{

// continue only if the XMLHttpRequest object isn't busy

// and the cache is not empty

if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)

&& cache.length > 0)

{

// get a new set of parameters from the cache

var cacheEntry = cache.shift();

// make a server request to validate the extracted data

xmlHttp.open("POST", serverAddress, true);

xmlHttp.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

xmlHttp.onreadystatechange = handleRequestStateChange;

xmlHttp.send(cacheEntry);

}

}

catch (e)

{

// display an error when failing to connect to the server

displayError(e.toString());

}

}

}

// function that handles the HTTP response

function handleRequestStateChange()

{

// when readyState is 4, we read the server response

if (xmlHttp.readyState == 4)

{

// continue only if HTTP status is "OK"

if (xmlHttp.status == 200)

{

try

{

// read the response from the server

readResponse();

}

catch(e)

{

// display error message

displayError(e.toString());

}

}

else

{

// display error message

displayError(xmlHttp.statusText);

}

}

}

// read server's response

function readResponse()

{

// retrieve the server's response

var response = xmlHttp.responseText;

// server error?

if (response.indexOf("ERRNO") >= 0

|| response.indexOf("error:") >= 0

|| response.length == 0)

throw(response.length == 0 ? "Server error." : response);

// get response in XML format (assume the response is valid XML)

responseXml = xmlHttp.responseXML;

// get the document element

xmlDoc = responseXml.documentElement;

result = xmlDoc.getElementsByTagName("result")[0].firstChild.data;

fieldID = xmlDoc.getElementsByTagName("fieldid")[0].firstChild.data;

// find the HTML element that displays the error

message = document.getElementById(fieldID + "Failed");

// show the error or hide the error

message.className = (result == "0") ? "error" : "hidden";

// call validate() again, in case there are values left in the cache

setTimeout("validate();", 500);

}

// sets focus on the first field of the form

function setFocus()

{

document.getElementById("txtUsername").focus();

}

AJAX Form Validation - Learn step by step PART -3

6. Now create index.php, and add this code to it:

<?php

require_once ('index_top.php');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Practical AJAX: Form Validation</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="validate.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="validate.js"></script>

</head>

<body onload="setFocus();">

<fieldset>

<legend class="txtFormLegend">New User Registration Form</legend>

<br />

<form name="frmRegistration" method="post"

action="validate.php?validationType=php">

<!-- Username -->

<label for="txtUsername">Desired username:</label>

<input id="txtUsername" name="txtUsername" type="text"

onblur="validate(this.value, this.id)"

value="<?php echo $_SESSION['values']['txtUsername'] ?>" />

<span id="txtUsernameFailed"

class="<?php echo $_SESSION['errors']['txtUsername'] ?>">

This username is in use, or empty username field.

</span>

<br />

<!-- Name -->

<label for="txtName">Your name:</label>

<input id="txtName" name="txtName" type="text"

onblur="validate(this.value, this.id)"

value="<?php echo $_SESSION['values']['txtName'] ?>" />

<span id="txtNameFailed"

class="<?php echo $_SESSION['errors']['txtName'] ?>">

Please enter your name.

</span>

<br />

<!-- Gender -->

<label for="selGender">Gender:</label>

<select name="selGender" id="selGender"

onblur="validate(this.value, this.id)">

<?php buildOptions($genderOptions,

$_SESSION['values']['selGender']); ?>

</select>

<span id="selGenderFailed"

class="<?php echo $_SESSION['errors']['selGender'] ?>">

Please select your gender.

</span>

<br />

<!-- Birthday -->

<label for="selBthMonth">Birthday:</label>

<!-- Month -->

<select name="selBthMonth" id="selBthMonth"

onblur="validate(this.value, this.id)">

<?php buildOptions($monthOptions,

$_SESSION['values']['selBthMonth']); ?>

</select>

-

<!-- Day -->

<input type="text" name="txtBthDay" id="txtBthDay" maxlength="2"

size="2"

onblur="validate(this.value, this.id)"

value="<?php echo $_SESSION['values']['txtBthDay'] ?>" />

-

<!-- Year -->

<input type="text" name="txtBthYear" id="txtBthYear" maxlength="4"

size="2" onblur="validate(document.getElementById('selBthMonth').options[document.getElementById('selBthMonth').selectedIndex].value + '#' + document.getElementById('txtBthDay').value + '#' + this.value, this.id)"

value="<?php echo $_SESSION['values']['txtBthYear'] ?>" />

<!-- Month, Day, Year validation -->

<span id="selBthMonthFailed"

class="<?php echo $_SESSION['errors']['selBthMonth'] ?>">

Please select your birth month.

</span>

<span id="txtBthDayFailed"

class="<?php echo $_SESSION['errors']['txtBthDay'] ?>">

Please enter your birth day.

</span>

<span id="txtBthYearFailed"

class="<?php echo $_SESSION['errors']['txtBthYear'] ?>">

Please enter a valid date.

</span>

<br />

<!-- Email -->

<label for="txtEmail">E-mail:</label>

<input id="txtEmail" name="txtEmail" type="text"

onblur="validate(this.value, this.id)"

value="<?php echo $_SESSION['values']['txtEmail'] ?>" />

<span id="txtEmailFailed"

class="<?php echo $_SESSION['errors']['txtEmail'] ?>">

Invalid e-mail address.

</span>

<br />

<!-- Phone number -->

<label for="txtPhone">Phone number:</label>

<input id="txtPhone" name="txtPhone" type="text"

onblur="validate(this.value, this.id)"

value="<?php echo $_SESSION['values']['txtPhone'] ?>" />

<span id="txtPhoneFailed"

class="<?php echo $_SESSION['errors']['txtPhone'] ?>">

Please insert a valid US phone number (xxx-xxx-xxxx).

</span>

<br />

<!-- Read terms checkbox -->

<input type="checkbox" id="chkReadTerms" name="chkReadTerms"

class="left"

onblur="validate(this.checked, this.id)"

<?php if ($_SESSION['values']['chkReadTerms'] == 'on')

echo 'checked="checked"' ?> />

I've read the Terms of Use

<span id="chkReadTermsFailed"

class="<?php echo $_SESSION['errors']['chkReadTerms'] ?>">

Please make sure you read the Terms of Use.

</span>

<!-- End of form -->

<hr />

<span class="txtSmall">Note: All fields are required.</span>

<br /><br />

<input type="submit" name="submitbutton" value="Register"

class="left button" />

</form>

</fieldset>

</body>

</html>


AJAX Form Validation - Learn step by step PART -2

5. Now create a new file named index_top.php, and add the following code. This script will be loaded from the main page index.php.

// enable PHP session

session_start();

// Build HTML

function buildOptions($options, $selectedOption)

{

foreach ($options as $value => $text)

{

if ($value == $selectedOption)

{

echo '

'" selected="selected">' . $text . '';

}

else

{

echo '';

}

}

}

// initialize gender options array

$genderOptions = array("0" => "[Select]",

"1" => "Male",

"2" => "Female");

// initialize month options array

$monthOptions = array("0" => "[Select]",

"1" => "January",

"2" => "February",

"3" => "March",

"4" => "April",

"5" => "May",

"6" => "June",

"7" => "July",

"8" => "August",

"9" => "September",

"10" => "October",

"11" => "November",

"12" => "December");

// initialize some session variables to prevent PHP throwing Notices

if (!isset($_SESSION['values']))

{

$_SESSION['values']['txtUsername'] = '';

$_SESSION['values']['txtName'] = '';

$_SESSION['values']['selGender'] = '';

$_SESSION['values']['selBthMonth'] = '';

$_SESSION['values']['txtBthDay'] = '';

$_SESSION['values']['txtBthYear'] = '';

$_SESSION['values']['txtEmail'] = '';

$_SESSION['values']['txtPhone'] = '';

$_SESSION['values']['chkReadTerms'] = '';

}

if (!isset($_SESSION['errors']))

{

$_SESSION['errors']['txtUsername'] = 'hidden';

$_SESSION['errors']['txtName'] = 'hidden';

$_SESSION['errors']['selGender'] = 'hidden';

$_SESSION['errors']['selBthMonth'] = 'hidden';

$_SESSION['errors']['txtBthDay'] = 'hidden';

$_SESSION['errors']['txtBthYear'] = 'hidden';

$_SESSION['errors']['txtEmail'] = 'hidden';

$_SESSION['errors']['txtPhone'] = 'hidden';

$_SESSION['errors']['chkReadTerms'] = 'hidden';

}

?>


AJAX Form Validation - Learn step by step

AJAX Form Validation learn step by step

1. Connect to the ajax database, and create a table named users with the following code:

CREATE TABLE users

(

user_id INT UNSIGNED NOT NULL AUTO_INCREMENT,

user_name VARCHAR(32) NOT NULL,

PRIMARY KEY (user_id)

);

2. Execute the following INSERT commands to populate your users table with some sample data (because user_id is an auto_increment column, its values will be generated by the database):

INSERT INTO users (user_name) VALUES ('bogdan');

INSERT INTO users (user_name) VALUES ('filip');

INSERT INTO users (user_name) VALUES ('mihai');

INSERT INTO users (user_name) VALUES ('emilian');

INSERT INTO users (user_name) VALUES ('paula');

INSERT INTO users (user_name) VALUES ('cristian');

3. In your ajax folder, create a new folder named validate.

4. Let's start writing the code with the presentation tier. Create a file named validate.css, and add the following code to it:

body

{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
}

label
{
float: left;
width: 150px;
font-weight: bold;
}
input, select
{
margin-bottom: 3px;
}
.button
{
font-size: 2em;
}
.left
{
margin-left: 150px;
}
.txtFormLegend
{
color: #777777;
font-weight: bold;
font-size: large;
}
.txtSmall
{
color: #999999;
font-size: smaller;
}
.hidden
{
display: none;
}
.error
{
display: block;
margin-left: 150px;
color: #ff0000;
}


AJAX Form Validation
AJAX Form Validation - Learn step by step PART-2

AJAX Form Validation - Learn step by step PART-3
AJAX Form Validation - Learn step by step PART-4
AJAX Form Validation - Learn step by step PART-5
AJAX Form Validation - Learn step by step PART-6


Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex