Check to see if the user has been redirected to the page using JavaScript

Question

Check to see if the user has been redirected to the page using JavaScript

When a file input validation fails in a Laravel project, the user is redirected back to the current page. However, the issue arises when the user has to scroll down to see the error message and understand what went wrong.

This doesn't provide the best user experience, so I came up with an idea to automatically scroll down to where the mistake was made using JavaScript upon redirection to the page.

I can achieve this by utilizing the scrollIntoView() function, but I need to determine if the user was redirected to the page (which only happens on validation failure).

I attempted the following approach:

if (window.performance.navigation.type == 0) {
    specificElement.scrollIntoView();
}

However, this condition will also be met if the user arrives after a form submission (which occurs right before - as there are two forms one after the other), rendering this solution ineffective.

Do you have any ideas on how to identify that the user was redirected?

javascript laravel http-redirect

Answer 1

Answer №1

One helpful approach is to initially verify for any validation errors before proceeding further. If there are errors present, you can utilize a simple JavaScript function called 'scrollIntoView'.

In Laravel 5.7, the following code snippet can be used:

   @if ($errors->any())
       <script>
            element.scrollIntoView();
       </script>
   @endif

Answer 2

One helpful approach is to initially verify for any validation errors before proceeding further. If there are errors present, you can utilize a simple JavaScript function called 'scrollIntoView'.

In Laravel 5.7, the following code snippet can be used:

   @if ($errors->any())
       <script>
            element.scrollIntoView();
       </script>
   @endif

Check to see if the user has been redirected to the page using JavaScript

Answer №1

Similar questions

A mistake has occurred: Unhandled promise rejection TypeError: Unable to assign the property 'devices' to an undefined object in Ionic 4 with Angular

ng-grid cell onclick callback

Can you show me the steps for linking the next method of an EventEmitter?

Tips for Retrieving Html Element Attributes Using AngularJS

Despite the value being true, the if statement does not work when used with a Mongoose object in Node.js

Having trouble with missing jQuery form serialize data in CodeIgniter when using TinyMCE?

Issue with Electron | JavaScript Runtime

"Attempting to dynamically include Components for SSR bundle in React can result in the error message 'Functions are invalid as a React child'. Be cautious of this

When attempting to set a dynamic src tag for embedding a Google Map in a React application, an X-Frame-Options

Ways to utilize the map() function with data retrieved from an axios response?

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

Steps to restrict input in a text area to only backspace and cursor movements

Issue with Laravel and VueJS - Component not showing up

Provide JWT token back to JavaScript Single Page Application after completing OAuth login

Patience is key as we wait for the webpage to finish loading

The JQuery script is not producing any results

How to extract hrefs within <li> tags from a <ul> element with Cheerio

Obtain JSON data instead of XML data from a web service through Ajax with the option 'contentType' set to 'false'

React's useEffect delay instability

Having trouble saving changes with my Laravel Patch Request - any ideas why?