Validation plugin integration

[bruj0]

Hi, ive managed to integrate the Validation plugin with qtip2 properly.
The example shown in the Demo page only shows the first error message, this is becouse "errorPlacement: function(error, element)" is only called once to set the location of the error messages.
The only problem that i had was when using:

$('.selector').qtip('option', 'content.text', 'new content');

It wouldnt refresh the qtip text so i had to destroy and recreate it everytime the error message changes, if anybody knows why please post here or email me.

The implementation that works is by hooking "highlight", "unhighlight" and "showErrors", as follows:

http://paste.ideaslabs.com/show/CV3fjxNjoj

PS: The [ CODE ] tag in this forums sucks

[bruj0]

It doesnt suck, i was using it wrong

JS Code

$(document).ready(function() {
 
    var myForm= $('#registration_form');
    var validator = $("#registration_form").validate({
             errorClass: 'error',
             validClass: 'valid',
            highlight: function(element,errorClass) {
 
                var selector = $('#'+element.id);
 
                if( selector.attr('type') =='checkbox' )
                    selector=selector.next('span');                
 
                selector.qtip('show');
            },
            unhighlight: function(element, errorClass, validClass) {
                var selector = $('#'+element.id);
 
                if( selector.attr('type') =='checkbox' )
                    selector=selector.next('span');
 
                selector.qtip('hide'); // Hides the tooltip
            },
            showErrors: function(errorMap, errorList) {
                var validation = this;
 
                    $(errorList).each(function() {
                        var error   = this.message;
                        var element = this.element;
                        var selector= $('#'+element.id);
                        var position = {};
 
                        if( selector.attr('type') =='checkbox' )
                            selector=selector.next('span');
 
                        selector.qtip('destroy'); 
                        selector.qtip({
                           overwrite: false,
                           content: error,
                           position: { my: 'left center', at: 'right center'},
                           show: {
                              event: false,
                              ready: true
                           },
                           hide: false,
                           style: {
                              classes: 'ui-tooltip-red' // Make it red... the classic error colour!
                            }
                        });
                        validation.settings.highlight(this.element);
                    });
                for (var i = 0, elements = this.validElements(); elements[i]; i++) {
                        validation.settings.unhighlight(elements[i], validation.settings.errorClass, validation.settings.validClass);
                }
            },
            onkeyup: function(element) {
                if(element.name == 'register[email]' || element.name == 'register[username]')
                    return false;
                else
                    return true;
            },
            rules: {
                    'register[terms_and_conditions]' : {
                        required: true,
                    },                
                    'register[username]': {
                        required: true,
                        minlength: 2,
                        remote : '{{link_check_username_ajax}}'
                    },
                    'register[password]': {
                        required: true,
                        minlength: 5
                    },
                    'register[retype]' : {
                        required: true,
                        minlength: 5,
                        equalTo: "#input_password"
                    },
                    'register[fkcountry]': {
                        required: true 
                    },
                    'register[email]' : {
                        required: true,
                        email : true,
                        remote : '{{link_check_email_ajax}}'
                    }
 
 
            },
            messages: {
                'register[email]' : {
                    email     : 'Please specify a valid email address',
                    required  : 'You must specify an email address'
                },
                'register[username]': {
                    required   : 'Please specify an username',
                    minlength  : 'The username must be at least 2 characters'
                },
                'register[password]': {
                    required  : 'Please specify a password',
                    minlength : 'The password must be at least 5 characters'
                },
                'register[retype]' : {
                    required     : 'Please confirm the password',
                    minlength   : 'The password must be at least 5 characters',
                    equalTo     : "Please enter the same password as above"
                },
                'register[fkcountry]' : {
                    required: 'Please select your country'
                },
                'register[terms_and_conditions]' : {
                    required: 'You must agree to out Terms & Conditions to register'
                }              
            }
    });
 
 
});

[Craig]

Mmm, is this based off the http://craigsworks.com/projects/qtip2/demos/#validation demo?

[bruj0]

(13th February 17:33)Craig Wrote:  Mmm, is this based off the http://craigsworks.com/projects/qtip2/demos/#validation demo?

Yea but i changed it a lot, like i said it has a bug, do you want me to update it so it works on the demo?

[sparky672]

A little off-topic but the software running this discussion forum is not rendering correctly in Safari 4.1.3 Mac or Firefox 3.6.13 Mac.

Within the code sections, instead of seeing my highlighted words as per the URL query string...

?highlight=validation+demo

I'm seeing the raw HTML within the code sections above. So I can actually see this

"<span class="highlight" style="padding-left: 0px; padding-right: 0px;">validation</span>"

mixed in with all the raw javascript code making it impossible to read.