0

ユーザーがフォーム「x」を送信すると、フォームは JavaScript 検証を通過し、エラーのある要素の下にエラー メッセージが表示されます。これは、エラーを配置するコードの最後のセクションです。

errorElement: "span",
errorClass: "field-validation-error",
errorPlacement: function (error, element) {
error.insertAfter(element.closest('div'));}

ユーザーがクリックsubmitしてすべてのエラーが配置されると、ページはユーザーが持っていた場所から移動しません。ページの最初のエラーまでページをスクロールして、ユーザーが何を間違えたかを明確に確認できるようにします。

これはおそらく間違っていますが、上記のコードの下で次のようなことを試しました。

var position = element.position;
$.scrollTop(position.top);

なぜこれが機能しないのですか？

4

2 に答える 2

1

「要素」が何であるかに応じて、簡単に実行できます（要素がすでにJQueryオブジェクトであると仮定します）：

http://api.jquery.com/position/

と

http://api.jquery.com/scrollTop/

$(window).scrollTop(element.position().top);

要素がすでに JQuery オブジェクトである場合は、実行する必要がないことに注意してください$(element)。要素が jquery オブジェクトでない場合、その要素に戻るには ID または一意のセレクターである必要があります。

編集: アニメーションのサポート

http://api.jquery.com/animate/

$(window).animate({"scrollTop": element.position().top});

編集：コメントから要素を選択するアドレス

他のオプションは、エラー要素にすべて同じクラスを与えることです。この方法では、(完了時に) ページの最初のエラーまでスクロールできます。

var scrollPosition = Number($(".common-error-class:first").position.top);

次に、ウィンドウを呼び出してスクロールするだけです。

$(window).scrollTop(scrollPosition);

編集：検証済みの作業例

//The line you are focusing on
$(window).scrollTop($("input:last").position().top);

完全な html ファイル:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script type="text/javascript" src="/Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#triggerScroll").on("click", function () {
                $(window).scrollTop($("input:last").position().top);
            });
        });
    </script>

</head>

<body>
    <button id="triggerScroll">Scroll</button>
    <div class="container">

<h2>Index</h2>

<form action="/Request/InvokeAction" method="post">    <input type="hidden" name="ActionID" value="10" />

<div class="editor-label"><label for="FirstName">FirstName</label></div>

<div class="editor-field"><input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="LastName">LastName</label></div>

<div class="editor-field"><input class="text-box single-line" id="LastName" name="LastName" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="Company">Company</label></div>

<div class="editor-field"><input class="text-box single-line" id="Company" name="Company" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Company" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthMonth">BirthMonth</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthMonth must be a number." data-val-required="The BirthMonth field is required." id="BirthMonth" name="BirthMonth" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthMonth" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthDay">BirthDay</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthDay must be a number." data-val-required="The BirthDay field is required." id="BirthDay" name="BirthDay" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthDay" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthYear">BirthYear</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthYear must be a number." data-val-required="The BirthYear field is required." id="BirthYear" name="BirthYear" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthYear" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthDate">BirthDate</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-required="The BirthDate field is required." id="BirthDate" name="BirthDate" type="datetime" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthDate" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="Email">Email</label></div>

<div class="editor-field"><input class="text-box single-line" id="Email" name="Email" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span></div>

    <div style="clear: both;"></div>

    <button type="submit">Submit</button>

</form>

    </div>

</body>

</html>
于 2012-07-25T20:39:44.237 に答える
1

問題は、element.position代わりに を使用していることですelement.position()。Positionはプロパティではなく jQuery 関数です。

于 2012-07-25T20:40:45.530 に答える