In this article, I'm going to discuss on how I integrated and implemented jQuery Form Validator and jQuery Form for handling form validation and submission with Adobe CQ5 (AEM).

Assumption (for the sake of this example):

  1. Your CQ application/project name is: myapplication
  2. We have 3 different clientlibs categories: myapplication.jquery, myapplication.components (embeds myapplication.components.apps), and myapplication.components.apps (this category is for the clientlibs located in the apps level).
  3. The location for the 3 clientlibs are: /etc/designs/myapplication/jquery,
     /etc/designs/myapplication/components,
     /apps/myapplication/components/{component_name}/clientlibs.
  4. We include clientlibs in the CQ page component (I included in the page's footer area).

We are using the following jQuery plugins for form validation:

  1. jQuery Form Validator for validating form fields. The plugin is loaded in the jQuery clientlibs, i.e. myapplication.jquery. The script path is /etc/designs/myapplication/jquery/plugins/formvalidator. Go to http://formvalidator.net/ for documentation.
  2. jQuery Form for form submission. It's very handy and efficient for handling ajax form submission. The plugin is loaded in the jQuery clientlib, myapplication.jquery. The script path is /etc/designs/myapplication/jquery/plugins. Go to http://malsup.com/jquery/form/ for documentation.

How to implement these plugin?

  1. In the component clientlibs, myapplication.components (/etc/designs/myapplication/component), we have a JS file called validateForm.js (/etc/designs/myapplication/component/js/validateForm.js). In that file, we have our script:validates form on submit and ajax submit on success (see Script 1).
  2. CQ component level JS script needs to trigger form validate and form submission. That can be done by adding this block of codes in the component level clientlibs 

    ...
// Register active form in your apps level CQ component clientlibs JS
myapplication.forms = myapplication.forms || [];
myapplication.forms.push("{form_selector}"); // i.e. #myformid
...


    What the block of codes does is registering form's selector.

Script 1

/**
 * @author nimsothea
 */

// validate form if there is a request
if (typeof myapplication.forms !== "undefined" && is_array(myapplication.forms) && myapplication.forms.length)
{
    var formIDs = [];

    for(var i = 0; i < myapplication.forms.length; i++)
    {
        if (jQuery(myapplication.forms[i]).length)
        {
            formIDs.push(myapplication.forms[i]);
        }
    }

    if (formIDs.length)
    {
        jQuery.validate({
            form: implode(',', formIDs),
            validateOnBlur: true, // OPTIONAL
            errorMessagePosition: 'top', // OPTIONAL
            scrollToTopOnError: true, // OPTIONAL
            onSuccess: function()
            {
                $(this.form).ajaxSubmit({
                    success: function(d)
                    {
                        console.log(d); // DO SOMETHING HERE...
                    }
                });

                return false;
            }
        });
    }
}