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

请记住，如果 element 已经是您不需要做的 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 回答