0

I have a form in my page that is filled out in 3 steps. For each step, fields are contained in a div grouping together elements of that step. When the user moves to the next step I hide that div and show the next one. After the last step, the users confirms the data and submits it. At this point, validation kicks in, validating ALL fields in the form (of every step).

I am using floating qTips to show error comments on validation failing fields. My problem is that the tip shows up with a messed up position when the failing field is not visible, and when it becomes visible, it jumps all over the screen to its correct position.

Question: How can I get the qTip to be visible only when the field is visible and to hide when its not?

The generated qTip has an inner element htmlFor="name-of-field" so I guess I can use that to relate each qTip to its generating field. But how do I get it to hide/show with the field when each step div is hidden/shown?

JJJ
  • 32,902
  • 20
  • 89
  • 102
AJC
  • 1,853
  • 1
  • 17
  • 28
  • This would be a great feature. I'd be interested in it as well. Allowing qtip to display with show:{ready:true} will cause the qtip to be positioned out in the boondocks (since jquery Position doesnt work on hidden elements). It'd be nice if we could do something like: hide:{event:"hidden"} and show:{event:"visible"} which will track the parent element's visibility. – Brandon Wittwer Jun 01 '12 at 14:32

1 Answers1

0

Just found this today

 $(el).qtip({events: {
 show: function (event, api) {
      if (api.elements.target.is(':hidden')) {
           event.preventDefault();
          }
     }});

This worked for me. Checking the visibility of the parent item and deciding to stop the show event depending on that. Qtip2 provides a number of events that are cancelable like this one.

See the docs here: http://craigsworks.com/projects/qtip2/docs/api/events/

Brandon Wittwer
  • 381
  • 1
  • 8
  • P.S. I know you probably don't need the answer, but I'm betting someone else might. What with all the new MVVM and unobtrusive validation push in the industry. My project is using Knockout, jquery validate and unobtrusive validation plus qtip2. If anyone's interested, I can post my solution for integrating qtip into the unobtrusive validation method. – Brandon Wittwer Jun 01 '12 at 15:12
  • I don't need it right now, but I never got around to solving this so i might in the future. Thank you for your response. I'll take some time this week to try this out and see if this works for me. I have a question regarding the unobstrusive validation and qtip integration, if you want you can check my solutions (and others in the question) as well as posting your own so people can compare and vote. (http://stackoverflow.com/questions/6802045/integrating-qtip-with-mvc3-and-jquery-validation-errorplacement) – AJC Jun 06 '12 at 15:31