Combining jquery validate and tipsy plugins

There're two popular plugins for jQuery, which are both handy in today's web-ui development:

1. jQuery validate (download link, documentation) - client-side forms validation
2. jQuery tipsy (download link & documentation) - nice looking tooltips

Both plugins a very easy to integrate into existing page. However I could not find any posts on the internet on how to use tipsy with validation plugin.

Well, since both plugins are highly extendible, it did not take long to integrate both in a single solution.

Let's assume we've got a simple sign-in form:

<form action="/SignIn" method="post" id="form">

    <table align="center">

        <tr>

            <td class="field">User name:</td>

            <td class="input">

                <input type="text" name="UserName" id="UserName" />

            </td>

        </tr>

        <tr>

            <td class="field">Password:</td>

            <td class="input">

                <input type="password" name="Password" id="Password" />

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <input type="submit" value="Sign In" />

            </td>

        </tr>

    </table>

</form>

We would like to validate that both UserName and Password fields are filled.

The solution using both tipsy and validate plugins looks like this:

    $(function () {

        $('#form :input').tipsy({ trigger: 'manual', fade: true, gravity: 'w' });

        $('#form').validate({
            rules: {
                'UserName': 'required',
                'Password': 'required'
            },

            messages: {
                'UserName': 'UserName is required field',
                'Password': 'Password is required field'
            },

            success: function (label) {
                $(label).each(function () {
                    $('#' + this.htmlFor).tipsy('hide').removeAttr('title');
                });
            },

            errorPlacement: function (error, element) {
                element.attr('title', error.text());
                element.tipsy('show');
            }
        });

    });

We might also want to apply such behavior to all the pages where we include validate and tipsy plugins together. To achieve this, let's put the following piece of code to separate .js file, and include this file in all pages. As you can see, we've just overrided success and errorPlacement default options:

$(function () {

    if (typeof $.fn.validate != 'undefined'
        && typeof $.fn.tipsy != 'undefined') {

        $.validator.setDefaults({
            success: function (label) {
                $(label).each(function () {
                    $('#' + this.htmlFor).tipsy('hide').removeAttr('title');
                });
            },

            errorPlacement: function (error, element) {
                element.attr('title', error.text());
                element.tipsy('show');
            }
        });
    }

});