The jQuery/PHP Validator

Posted: April 6th, 2010 | Author: | Filed under: JS, PHP | 1 Comment »

Check out our demo which uses the jQuery as well as the PHP validator:
http://open-source.yes2web.nl/php-validator/demo1/validator-form.php

We the developers already know about the famous jQuery validator and about all the wonderful things it is capable of. But we also know that this validation is only on the client side.

What about server side validation on form input? Isn’t that important too? Of course it is. And that is exactly why we’ve come up with the following solution for this issue: The php validator. This validator consists of a class which contains a collection of methods similar to the jQuery validator. This way, we have validation on both client- and server sides using exactly the same rules and error messages.

Our PHP validator is based on the bassistance jQuery validator found at: http://bassistance.de/jquery-plugins/jquery-plugin-validation/


How it works

It’s pretty simple really. All you need is the Validator.class.php file which can be found at the google code project page http://code.google.com/p/jquery-validation-php-plugin/, or it can be downloaded directly from: http://jquery-validation-php-plugin.googlecode.com/files/jquery-validation-php-plugin-0.3.zip. Once you obtain this crucial file, then you can get to work.

First, make an instance by doing the following:

$oValidator = new Validator($aasOption);

The two-way road: PHP and jQuery
The $aasOption variable is an array with our validation rules and messages. This array is built the same way the jQuery is built. The main advantage of creating this array is that we can use it in PHP as well as JavaScript. This is mainly due to the fact that they both use the same atributes: ‘rules’ and ‘messages’. This way, we can implement it both ways.

Here is a simple example requiring the $_POST['name'] field to be set:

$aasOption = array(
‘rules’ => array(
‘name’ => ‘required’
),
‘messages’ => array(
‘name’ => array(
‘required’ => ‘This field is required’
)
)
);

The following javascript shows how we implement the array for use in JavaScript:

$(document.forms[0]).validate(<?php json_encode($aasOption); ?>);

The catch is that each field to be validated must be specified in the jQuery options object by it’s name, not by id or class, as these are not acuired by the server.

The Form
Now that we can call upon our source, we can build our soon to be validated form.

<label for=”name”>Name:</label>
<input id=”name” type=”text” name=”name” value=”<?php

echo isset($_POST['name'])? $_POST['name']:”;

?>“/>

Now that we have a form, we can validate it with PHP. We must first check if there’s an empty $_POST.
if(!empty($_POST)){}

It is within this if- statement where validation is triggered using the validate(); method from the Validator.class.php.

The if- statement will eventually look like this:

if(!empty($_POST)){
$oValidator->validate($_POST);
}

Now we have validation. Hey! But wait! I don’t see any messages.
That is absolutely true because we haven’t added them yet.

Next to the input field, we must use the exact same label tag for errors that you would use in the jQuery validator.
We do this by using the showError(); method, found in the Validator class. We then echo the message by typing in the following:

<?php echo $oValidator->showError(‘name’); ?>

Pay attention: The showError(); method creates a label tag by default. You don’t have to create a label in wich you echo the method.

For the the jQuery validation you can go to work the same way you usually do. The only difference is that you will use the $aasOption array. More information about the jQuery validation can be found at: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Here is how you refer to it in JavaScript: validate(<?php echo json_encode($aasOption);?>);

For your viewing pleasure, we have created a demo so that you can see both the php and the JavaSript validation in action:
http://open-source.yes2web.nl/php-validator/demo1/validator-form.php
Further documentation:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://docs.jquery.com/Plugins/Validation
http://code.google.com/p/jquery-validation-php-plugin/


One Comment on “The jQuery/PHP Validator”

  1. 1 Dylan said at 1:26 pm on May 15th, 2011:

    You should post up the server-side PHP that goes with your demo so that people can see that side of things … otherwise you can only View Source in the browser and you just see the usual jquery validation code.


Leave a Reply