Home arrow JavaScript arrow Page 3 - Form Validation with Progressive Enhancement: Final Touches
JAVASCRIPT

Form Validation with Progressive Enhancement: Final Touches


In this sixth part of a series, I finish building a sample web application tasked with validating web forms via Ajax and PHP. The use of Progressive Enhancement is crucial to keeping the application working as expected, even if JavaScript is disabled on the browser.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
July 21, 2010
TABLE OF CONTENTS:
  1. · Form Validation with Progressive Enhancement: Final Touches
  2. · Review: building a form validation program using Progressive Enhancement
  3. · A basic data validation PHP class
  4. · A simple data checking script

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Form Validation with Progressive Enhancement: Final Touches - A basic data validation PHP class
(Page 3 of 4 )

As stated in the preceding segment, in this case the component tasked with validating the data entered in the previous web form will be a simple PHP class not surprisingly called “Validator” (yes, sometimes my creativity with names is really amazing). The underlying logic of this class is very simple to follow. Its corresponding definition looks like this:

(Validator.php)

<?php

class Validator

{

protected $_errors = array();

protected $_errorPrefix = '<p>';

protected $_errorSufix = '</p>';

// check an empty string

public function checkEmpty($value)

{

$value = $this->sanitizeValue($value);

if ($value === '')

{

$this->_errors[] = 'The entered value must be a non-empty string.';

}

return $this;

}

// check an integer number

public function checkInteger($value, array $options = array())

{

$value = $this->sanitizeValue($value);

if (!filter_var($value, FILTER_VALIDATE_INT, $options))

{

$this->_errors[] = 'The value ' . $value . ' must be an integer number.';

}

return $this;

}

// check a float number

public function checkFloat($value, array $options = array())

{

$value = $this->sanitizeValue($value);

if (!filter_var($value, FILTER_VALIDATE_FLOAT, $options))

{

$this->_errors[] = 'The value '. $value . ' must be a float number.';

}

return $this;

}

// check an email address

public function checkEmail($value)

{

$value = $this->sanitizeValue($value);

if (!filter_var($value, FILTER_VALIDATE_EMAIL))

{

$this->_errors[] = 'The value '. $value . ' must be a valid email address.';

}

return $this;

}

// sanitize basically inputted value

protected function sanitizeValue($value)

{

return filter_var(trim($value), FILTER_SANITIZE_STRING);

}

// check the errors

public function validate()

{

return empty($this->_errors);

}

// get the error messages as an array

public function getErrors()

{

return $this->_errors;

}

// get the error messages as a formatted string

public function getFormattedErrors()

{

return $this->_errorPrefix .

implode($this->_errorSufix .

$this->_errorPrefix, $this->_errors) .

$this->_errorSufix;

}

// clean up error messages

public function clearErrors()

{

$this->_errors = array();

}

}

As you can see above, the “Validator” class implements a few discrete methods for checking some typical data types, such as integer and float numbers, empty strings and email addresses. As one might expect, each error that occurs during the validation process is stored on the protected $_errors property, which is used internally by the “validate()” method to determine whether or not the supplied data is correct.

Due to the flexible nature of the class, it’s really easy to extend its current capabilities via additional methods. For demonstration purposes, however, its existing functionality is more than acceptable, so implementing those extra methods will be left as homework for you.

So far, so good. Having defined a class that’s capable of checking some basic data types, we'll now create a script that consumes its API, thus getting the previous form validation program up and running.

This final script will be created in the following section. To get there simply click on the links that appears below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials