Joomla validate chrono forms using jquery

It is a common practice to use Chrono forms in our joomla site to setup various forms in the site, be it a contact us form, submit a ticket form, or whatever.

I have set the option "validate form" to "No" under chronoform settings in admin panel, and also preferred to not include any js or css files.

For validating the chrono forms, i prefer jquery. So first lets add jquery support in our joomla. It is quite simple:

1. Download jquery.js and jquery_min.js (1.4.2 version is enough) and place them in media/system/js folder of your joomla.

2. Edit libraries->joomla->html->html->behavior.php, and add the following function below the mootools() function:

function jQuery($debug = null)
    {
        static $loaded;

        global $mainframe;
        // Only load once
        if ($loaded) {
            return;
        }

        // If no debugging value is set, use the configuration setting
        if ($debug === null) {
            $config = &JFactory::getConfig();
            $debug = $config->getValue('config.debug');
        }

        $konkcheck = strpos (strtolower($_SERVER['HTTP_USER_AGENT']), "konqueror");

        if ($debug || $konkcheck) {
            JHTML::script('jquery.js', 'media/system/js/', false);
        } else {
            if($mainframe->isSite()) {

                JHTML::script('jquery.min.js', 'media/system/js/', false);
            }
            else
            {
                JHTML::script('mootools.js', 'media/system/js/', false);
            }
        }
        $loaded = true;
        return;
    }


3. Create a js file (noconflict.js) with just this content:
jQuery.noConflict();

and upload it in your site.... (probably in the media/system/js folder).

4. Add the jquery scripts in your joomla template index file:

$document    = &JFactory::getDocument();
$document->addScript($root_url.'media/system/js/jquery.js' );
$document->addScript($root_url.'media/system/js/noconflict.js' );

Now the jquery support is available to your joomla (through out the site).

I have download the jquery validation library file (jquery_validate.js) and put it in components/com_chronocontact/js folder.

Now lets edit the components/com_chronocontact/chronocontact.html.php and write the code to validate our chronoform:

Find the line in the file (usually at the top) something like:

if((!empty($MyForm->formrow->name))&&($MyForm->formrow->published)){
        ?>

Below that, add the following code:

<!-- JS files and validation added by shashi -->
        <script type="text/javascript" src="<?php echo $CF_PATH; ?>components/com_chronocontact/js/jquery_validate.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery("#<?php echo "ChronoContact_".$MyForm->formrow->name; ?>").validate();
        });
        </script>

Thats it... we have dynamically added the jquery validation for any chronoform in our joomla site.

Finally, in the form code (under admin panel) of your chronoform, dont forget to add validation classes to the elements, like: class="required" for text fields, class="required email" for email field, and class="submit" for submit button.

Done :)