1

我使用 jQuery-Validation-Engine 来验证表单，但是我遇到了问题....我在 div 中有一个表单，分为选项卡，我将 validationEngine 设置如下：

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

在提交时，在非活动中的活动选项卡中的字段上都可以正常工作......但非活动选项卡中的字段的弹出错误未与相应的字段对齐。

_calculatePosition 函数似乎忽略了隐藏字段的真实坐标以检查...

有什么建议吗？

非常感谢

4

2 回答 2

1

我已经为每个选项卡使用 validationEngine updatePromptsPosition 方法解决了同样的问题......像这样：

$(".tabs-1").click(function(){
    $form.find('form').validationEngine('updatePromptsPosition');
});
于 2013-08-13T10:16:40.593 回答
1

坦率地说，考虑到解决方案的简单性，这个问题还没有得到正确回答的事实有点愚蠢。简单（和文明）的方法是在用户每次切换选项卡时调用验证，为此，您只需将选项卡设置为：

如果您有以下跨多个选项卡的表单...

<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>

然后你像这样设置表单和选项卡：

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);
            }
        }
    });
});

结果是如果用户当前所在的选项卡不完全有效，则用户无法选择另一个选项卡。这是 JSFiddle 演示：http: //jsfiddle.net/g9yLL/36/

干杯! :-)

于 2014-02-11T08:49:15.137 回答