4

フォームの値を検証するために、Position Absolute の Validation Engineを使用しています。

問題は、検証時に、エラー プロンプトが期待どおりにテキスト ボックス (入力タイプ: テキスト) に添付されて表示されないことです。テキストボックスに指定したマージントップに問題があることはわかっていますが、それを変更することはできません。サンプル コード スニペットはこちらで提供されています...

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 です。また、各フォームには 100 を超えるフィールドがあるため、各入力フィールドの data-prompt-position 値をハードコーディングしたくありません。したがって、この問題を処理する一般的な方法を探しています (CSS を介して可能であることはわかっていますが、方法がわかりません)。

問題のあるデモのセットアップはwww.x-lant.comにあります

アプリケーションにログインするには、guest / pwdを使用します。

4

2 に答える 2

6

このコードをjsで使用しました

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

そしてこれはcssで

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

そしてそれはよさそうだ。更新されたフィドルはこちらです。

これがお役に立てば幸いです。

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

また、詳細なドキュメントはこちら.

于 2012-09-03T07:54:55.767 に答える
0

jquery.validationEngine.js を開く

そして後藤

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

位置を設定する

于 2016-12-08T05:15:18.097 に答える