Using qtip with jQuery validation framework

[mutleyoz]

Hi Craig et al,

I was hoping to get some help with a problem I've been struggling with most of today. I'm trying to replace the jQuery validation frameworks error messages with qtip. Using the following setup:

JS Code

$('form:first').validate({
                errorClass: "errormessage",
                onkeyup: false,
                success: function(error, element) {
                   <span style="font-style: italic;"> // trying to destroy element.qtip here</span>
                },
                errorPlacement: function(error, element) {
                    element.qtip(
                        {
                            show: { solo: true },
                            content: eval(error),
                            style: { width: 200, padding: 5, background: 'Red', textAlign: 'center', border: { width: 5, radius: 5, color: 'Red' }, tip: 'bottomLeft' },
                            position: {
                                corner: { target: 'topRight', tooltip: 'bottomLeft' }
                            }
                        });
 
                }
            })

I've been able to successfully display the errormessages in tooltips next to my textboxes ( and it looks great), however struck a problem when the user corrects the error. Although the errormessage (red-border) styling is removed the qtip remains active on hover. Usually this takes the form of an empty qtip.

My approach to attacking this has been to try and destroy/unbind/hide the qtip on validation 'success', however every method I've used has no effect and the qtip remains.

Any pointers appreciated, Cheers.

Sean

[Craig]

Mutleyoz, have you tried simply selecting all form elements without the .errormessage class and calling a destroy on them?

JS Code

$('form:first input:not(.errormessage)').qtip('destroy')

[lounge]

Hello

I'm stuck with the exact same problem, did you ever get resolved ?

I would really appreciate if you could show me your solution.


Thanks in advance !