Scroll to the Mandatory Field validation - Issue with Iframe - ScrollinToView- JavaScript


Sathish Nadarajan
SharePoint MVP
Published On :   20 Apr 2016
Visit Count
Today :  2    Total :   5236
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

SharePoint Office 365 Tool
Simple & Powerful Tool for Migration, Security & Reporting. Free Trial


Recently met with a strange small issue like setting up the focus. In one of the project, I have the AppPart and an lengthy App hosted inside that. Hence, both the SharePoint Site as well as the AppPart is having the Scroll Bars as shown in the figure.

clip_image002

Now, the issue was like at the bottom of the app, I have a submit button and on click of the submit button, the scroll should move up and focus should be set on the mandatory fields, which were not given the inputs. I tried with the asusual focus methods and the setfocus etc.,

But everything was working with the normal pages. But when I deploy inside this iFrame, nothing works. And the most important thing is, the SharePoint and the AppWeb are hosted on different domains. Since the document.domain differs, we cannot call the DOM Object.

While doing some googling, found a solution for this issue. The native JavaScript code will be very much helpful for this scenario.

Just a small div surrounding the control. Then we need to use the method scrollIntoView().

 if (($("#ddlDate").val() === "") || ($("#ddlDate").val() === "null")) {
                  document.getElementById("divDueDateCtrl").scrollIntoView();
                  
              }
 

Though it seems very small, it ate some hrs of my time to fix.

Happy Coding,

Sathish Nadarajan.

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

SharePoint Analytics