Validating using AJAX Validating example structure Filed validating Form validating

Validating using AJAX

• Validating example structure

• Filed validating

• Form validating

Validating structure- flow chart

AJAX Validation

• AJAX-style—when each form field loses focus (onblur). The field's value is sent to the server, which validates the data and returns a result (0 for failure, 1 for success). If validation fails, an error message will unobtrusively show up and notify the user about the failed validation

• PHP-style—when the entire form is submitted. This is the usual validation you would do on the server, by checking user input against certain rules. If no errors are found and the input data is valid, the browser is redirected to a success page as shown in Figure 4.4. If validation fails, however, the user is sent back to the form page with the invalid fields highlighted

Validation rules

• Username must not already exist in the database • Name field cannot be empty • A gender must be selected • Month of Birth must be selected • Birthday must be a valid date (between 1-31) • Year of birth must be a valid year (between 1900-2000) • The date must exist taking into consideration the number of

days for each month • Email address must be written in a valid email format, such

as [email protected] or [email protected] • Phone number must be written in standard US form: xxx-

xxx-xxxx • "I've read the Terms of Use" must be checked

Validating forms exampleThings happen after submitting

• Index.php structure:require_once ('index_top.php');<link href="validate.css" rel="stylesheet"

type="text/css" /> <script type="text/javascript"

src="validate.js"></script>

<body onload="setFocus();"><form name="frmRegistration" method="post"

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

Validate.js// holds an instance of XMLHttpRequestvar xmlHttp =

createXmlHttpRequestObject();// holds the remote server address var serverAddress = "validate.php";// when set to true, display detailed error

messagesvar showErrors = true;// initialize the validation requests cache var cache = new Array();function createXmlHttpRequestObject() // the function handles the validation for

any form fieldfunction validate(inputValue, fieldID)

// function that handles the HTTP responsefunction handleRequestStateChange() {........................ readResponse();.........................}

// read server's response function readResponse()function setFocus() {

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

}

Validate JavaScript functionfunction 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()); } } }

readReponse functionfunction 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);}

Validate.php structures<?php// start PHP sessionsession_start();// load error handling script and validation classrequire_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 checking: next week;}?>

Validate.class.php structures

• The file declare the classed which used by validate.php:– Open database– Public function ValidateAJAX– Public function ValidatePHP

• If no errors are found , point to a successful validation page allok.php

• Otherwise return to index.php

– Private functions about the field validation.

Private Functions of validate.class.php (1)

// 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;

}

Documents

Validating using AJAX Validating example structure Filed validating Form validating