Search code examples
jqueryvalidationqtip

qTip input fields validation not working with display:none

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?

Solution

  • Having qTip2 and validate work toghether seems no to be an easy task. One thing you are doing wrong is this line:

     content: $('.hiddenForm').html(),

    which should be (otherwise you make a copy of the html, while it should be a refernece)

     content: $('.hiddenForm'),

    In this way something works, but there are problems in showing the error messages. For that, you should check this post (hope it helps).

    Look at the fiddle: http://jsfiddle.net/nicolapeluchetti/qdwZN/4/

    If you press the submit, nothing happens, then if you focus on one of the fields and press "TAB" you see a part of the error message