CODEWITHSUNDEEP
jqueryscroll
user1489322
user1489322

Reputation: 3

Why doesn't JQuery scroll to the first DOM element after a given event is fired?

When a user submits form "x", the form goes through a JavaScript validation and error messages are placed underneath any elements that have errors. This is the last section of my code that places the errors:

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

When the user clicks submit and all the errors are placed, the page does not move from where the user had it. I want the page to scroll to the first error on the page so the user can clearly see what he did wrong.

This is probably way wrong but I tried something like this underneath the code above:

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

Why doesn't this work?

Upvotes: 0

Views: 1832

Answers (2)

VulgarBinary
VulgarBinary

Reputation: 3599

Depending on what your "element" is you can simply do (Assuming element is a JQuery object already):

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

and

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

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

Keep in mind if element is already a JQuery object you don't need to do $(element). If element is not a jquery object it needs to be the ID or unique selector to return to that element.

Edit: Animation Support

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

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

Edit: Address picking an element from comments

Your other options are to give your error elements all the same class, this way you could always (when completed) scroll to the first error on the page.

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

Then from there you only have to invoke the window to scroll:

$(window).scrollTop(scrollPosition);

Edit: Verified working example

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

The full html file:

<!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>

Upvotes: 1

ErikE
ErikE

Reputation: 50271

The problem is that you're using element.position instead of element.position(). Position is a jQuery function, not a property.

Upvotes: 1

Related Questions