Skip to main content

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 :)

Comments

Popular posts from this blog

joomla remove category name in url

-) If anyone is using the lyftenbloggie component, and want to remove the component name and category title from the sef url, follow this hack: (Note: You also need to install the lyftenbloggie extension for ARTIO SEF) Under components/com_sef/joomsef.php, After this code: $location = array();         foreach ($title as $titlePart) {             if (strlen($titlePart) == 0) continue;             $location[] = JoomSEF::_titleToLocation($titlePart);         } Just add this code: if($location[0] == 'lyftenbloggie')         {         $temp_sef = end($location);         $location = array();            $location[] = $temp_sef;         ...

php get content between tags

This involves parsing the dom document. <?php function getTextBetweenTags($tag, $html) {     $dom = new domDocument;     @$dom->loadHTML($html);         $dom->preserveWhiteSpace = false;     $content = $dom->getElementsByTagname($tag);     $out = array();         foreach ($content as $item)     {         $out[] = $item->nodeValue;     }     return $out; } $xhtml = '<tag>abc def</tag><tag>123 456</tag>'; $content2 = getTextBetweenTags('tag', $xhtml); foreach( $content2 as $item ) {     echo $item.'<br />'; } ?> Output: abc def 123 456