jQuery-Validation-Engine wrong position popup on field hidden (jquery tabs)

Question

I use jQuery-Validation-Engine for validate a form, but I've a problem .... I've a form in a div divided into tabs and I set the validationEngine like this:

$(".test").validationEngine({validateNonVisibleFields: true});

On submit works fine both on fields in the active tab in the non-active .... but popup error of the fields in non-active tab is not aligned to the corresponding field.

The _calculatePosition function seems that ignore the real coordinates of the field-hidden to check...

Any suggestion?

Thanks to much

Answer 1

I have solved the same problem using the validationEngine updatePromptsPosition method for each tab... Something like this:

$(".tabs-1").click(function(){
    $form.find('form').validationEngine('updatePromptsPosition');
});

Answer 2

The fact that this question hasn't been properly answered yet is frankly a bit silly considering the simplicity of the solution. The easy (and civilized) way is to invoke validation every time the user switches tabs, and to do that, you simply set up your tabs as such:

If you have the following form that spans multiple tabs...

<form id="myForm" action="">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>

        </li>
        <li><a href="#tabs-2">Tab 2</a>

        </li>
        <li><a href="#tabs-3">Tab 3</a>

        </li>
    </ul>
    <div id="tabs-1">
        <input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
    </div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

Then you set up the form and tabs like this:

jQuery("#myForm").validationEngine('attach', {
    promptPosition: "bottomLeft",
    validationEventTrigger: "submit",
    validateNonVisibleFields: true,
    updatePromptsPosition: true
});

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            if (!$("#myForm").validationEngine('validate')) {
                event.preventDefault();
                $('#myForm').validationEngine('hide');
                setTimeout(function () {
                    $("#myForm").validationEngine('validate');
                }, 450);
            }
        }
    });
});

The result is that the user cannot select another tab if the tab the user is currently on is not fully valid. Here is the JSFiddle demo: http://jsfiddle.net/g9yLL/36/

Cheers! :-)