[Solved] qTip input fields validation not working with display:none

[Maverick]

So basically I have a qTip that appears on mouseover, and the contents are in a div with dislay:none. I have validation on the input fields in that container, but they do not work with display:none. If you make it display:block it works outside the qTip.

Here are the fiddles with display:block & display:none:
http://jsfiddle.net/qdwZN/
http://jsfiddle.net/qdwZN/1/

I'm trying to make it work with the second fiddle, display:none. Any idea on how to get this thing working?

[Craig]

Well since you've styled it as .hidden, that will apply to the HTML in your tooltip too. If you use .clone() instead of .html() qTip will show it for you http://jsfiddle.net/qdwZN/5/

[Maverick]

(25th July 00:33)Craig Wrote:  Well since you've styled it as .hidden, that will apply to the HTML in your tooltip too. If you use .clone() instead of .html() qTip will show it for you http://jsfiddle.net/qdwZN/5/

Hi Craig,

The validation plugin does not work in your fiddle example

If you check the first fiddle http://jsfiddle.net/qdwZN/ you'll see the form outside validates correctly (try hitting the submit button on it). If you try it in the qTip, it does not work

[Craig]

Oh, try removing the clone in that case It's because you're using an ID as the selector target but cloninjg it causes more than one to be on the page, which is invalid. http://jsfiddle.net/qdwZN/6/

[Maverick]

(25th July 11:48)Craig Wrote:  Oh, try removing the clone in that case It's because you're using an ID as the selector target but cloninjg it causes more than one to be on the page, which is invalid. http://jsfiddle.net/qdwZN/6/

Hi Craig,

The focus/blur validation works. So if you type a letter, then click outside, then remove it, the validation will trigger. But the validation for the submit of the empty fields never triggers the validation as it should inside qTip. Any idea why this happens? I also added a submitHandler function that if everything is validated, should execute the functions in it, but there seems to be an issue with the submit doing the validation, causing it not to work properly. http://jsfiddle.net/qdwZN/7/

[Craig]

Use onRender instead and don't use an ID selector: http://jsfiddle.net/qdwZN/8/

[Maverick]

Thank you Craig, works like a charm