Client + Server Side Validation = New Love

Having to do some recent form validation I wanted to have a solution that worked both on the client and server side. I found it!

It comes from combining jQuery Validation Plugin and jQuery Validation PHP Plugin

Using both of these libraries I create one rule file and incorporate it for both client and server side validation. My recent rule file looks like the following.

<?php
    $validation_rules = array(
        'rules' => array(
            'timestamp' => array(
                'required' => true,
                'number' => true
            ),
            'full-name' => 'required',
            'address' => 'required',
            'city-state-zip' => 'required',
            'home-phone' => 'required',
            'email' => array(
                'required' => true,
                'email' => true
            ),
            'birthday' => array(
                'required' => true,
                'dateUS' => true
            )    
        ),
        'messages' => array(
            'timestamp' => array(
                'required' => 'Select a date.',
                'number' => 'The date selected is not valid.'
             ),
            'full-name' => 'Enter your full name.',
            'address' => 'Enter your address.',
            'city-state-zip' => 'Enter your city state and zip.',
            'home-phone' => 'Enter a phone number.',    
            'email' => array(
                'required' => 'Enter your email address',
                'email' => 'Enter a valid email address'
            ),
            'birthday' => array(
                'required' => 'Enter your birthday',
                'dateUS' => 'Enter a date in the format mm/dd/yyyy.' 
            )
        )
    );
?> 

Notice how I have dateUS. That is a custom validation rule I set up. Adding custom rules is really easy for both libraries.

I am using Twitter Bootstrap for my framework, and the following js helps jQuery validator work great on the client side.

var settings = $('#form').validate(<?php echo json_encode($validation_rules); ?>).settings;
$.extend(settings, {
    errorClass: 'help-block',
    highlight: function(element){
        $(element).closest('.control-group').addClass('error');
    },
    success: function(element){
        element.closest('.control-group').removeClass('error');
    }
});

My post to page now follows something along the following logic.

<?php 
    require_once 'rules.php'; 
    require_once 'validator.class.php'; 

    $oValidator = new Validator($validation_rules);

    $validated_data = $oValidator->validate($_POST);

    if (count($validated_data) == 0){
        echo 'no errors';
    }
    else{
        print_r($validated_data);
    }
?>