1

フォームの検証にjQuery-Validation-Engineを使用していますが、問題があります....タブに分割されたdivにフォームがあり、validationEngineを次のように設定しています。

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

送信時に、非アクティブなタブのアクティブなタブのフィールドの両方で正常に機能します....しかし、非アクティブなタブのフィールドのポップアップエラーは、対応するフィールドに配置されません。

_calculatePosition 関数は、フィールド非表示の実際の座標を無視してチェックしているようです...

なにか提案を？

おかげさまで

4

2 に答える 2

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 に答える