验证引擎插件的错误提示位置问题（绝对位置）答案

【问题标题】：Error prompt position issue with validationengine plugin (Position Absolute)验证引擎插件的错误提示位置问题（绝对位置）
【发布时间】：2012-08-23 13:04:24
【问题描述】：

我正在使用Position Absolute's Validation Engine 来验证表单上的值。

问题在于，在验证时，错误提示不会像预期的那样附加到文本框（输入类型：文本）。我知道问题出在我给文本框的边距顶部，但我无法改变它。这里提供了示例代码sn-p...

html:

<form id="frmTest" style="position:relative">
    <div id="divContents" style="position:relative; overflow-y:auto; overflow-x:none;">
        <div class="row1">
            <span>FName:</span>
            <input id="txtFName" data-prompt-position="bottomRight" class="validate[required] text-input" tabindex="1" />
        </div>
        <div class="row2">
            <span>LName:</span>
            <input id="txtLName" class="validate[required] text-input" tabindex="2" />
        </div>
        <div class="row3">
            <span>Age:</span>
            <input id="txtAge" class="validate[required, custom[integer],min[1]] text-input" tabindex="3" />
        </div>
    </div>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <input type="submit" id="btnSubmit" value="Submit" />
</form>

JS：

$('#frmTest').validationEngine();

$('#txtFName').focus();

$('#btnSubmit').click(function(){
    return $('#frmTest').validationEngine();
});

jsFiddle.

我创建的 div 只是示例，但在实际环境中，它们是可折叠的 div。另外，我不想为每个输入字段硬编码 data-prompt-position 值，因为每个表单中有超过 100 个字段。所以我正在寻找一种处理这个问题的通用方法（我知道可以通过 CSS，但不知道如何？）

有问题的演示设置在www.x-lant.com

使用 guest / pwd 登录应用程序。

【问题讨论】：

如果您不回复@Potherca，我们将无法帮助您。什么、在哪里、何时、如何？
@FelipeAls，我很抱歉，但会在某个时候提供指向我的网络应用程序的链接，该应用程序将提供特定于我的问题的场景。谢谢。

标签： jquery css jquery-validation-engine

【解决方案1】：

我只是在js中使用了这段代码

$('#frmTest').validationEngine({promptPosition : "bottomRight"});

这在 css 中

.formError{margin-top: 15px!important;}

而且看起来不错。更新后的小提琴是here。

希望对你有帮助。

HTML

<!DOCTYPE html>
    <html>
    <head>
        <title>Demo</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>

    <form id="frmTest" style="position:relative">
        <div id="divContents" style="position:relative; overflow-y:auto; overflow-x:none;">
            <div class="row1">
                <span>FName:</span>
                <input id="txtFName" data-prompt-position="bottomRight" class="validate[required] text-input" tabindex="1" />
            </div>
            <div class="row2">
                <span>LName:</span>
                <input id="txtLName" class="validate[required] text-input" tabindex="2" />
            </div>
            <div class="row3">
                <span>Age:</span>
                <input id="txtAge" class="validate[required, custom[integer],min[1]] text-input" tabindex="3" />
            </div>
        </div>
        <input type="submit" id="btnSubmit" value="Submit" />
    </form>
    </body>
    </html>

CSS

body
{
    margin: 0 auto;
    font-family: Arial;
    font-size: 12px;
    line-height: 20px;
}

div.row1, div.row2, div.row3
{
    min-height: 100px;
}

span
{
    clear: both;
    float: left;
    margin-left: 10px;
    padding: 20px 5px 0 20px;
    width: 50px;
}

#txtFName, #txtLName, #txtAge
{
    margin-top: 20px;
}

input[type=text]
{
    width: 150px;
}
.formError{
    margin-top: 15px!important;
}

JS

$('#frmTest').validationEngine({promptPosition : "bottomRight", autoPositionUpdate: true});

$('#txtFName').focus();

$('#btnSubmit').click(function(){
    return $('#frmTest').validationEngine();
});

另外，还有更多文档here。

【讨论】：

感谢您的回复。您的建议在某种程度上确实有效，但如果我以各种分辨率进行测试，它就会失败。你能提出更多建议吗？再次感谢您。
您能否更清楚地描述“失败”的原因以及解决方案？
@Potherca，我很抱歉耽搁了，因为我忙于一些紧急的事情。现在至于如果不同的解决方案出现的问题，jsFiddle 上的代码确实有效，但我将发布我的 Web 应用程序的链接以及来宾用户名和密码。请您以各种分辨率进行测试，并告诉我可能的分辨率。再次感谢您。
@Potherca，我已经用演示站点的链接更新了我的问题，演示站点是我们的实时应用程序的副本。没有按照 tsergium 的建议进行任何更改，因为我认为重新审视问题可能会导致正确的解决方案。谢谢。
抱歉直到现在才发帖，我编辑了我的回复，添加了代码和一个新的小提琴。请测试一下。我认为这就是您要寻找的： autoPositionUpdate: true; ...希望这次能成功

【解决方案2】：

打开 jquery.validationEngine.js

然后转到

// LEAK GLOBAL OPTIONS
    $.validationEngine = {
        fieldIdCounter: 0, defaults: {
// topRight, bottomLeft, centerRight, bottomRight, inline
promptPosition: "topLeft",

设置你的位置

【讨论】：