Loading video...

Video Failed to Load

Go Home

🍦 Nice little addition to a Laravel validation error: scroll your users back up to the error...

42,746 views • 2 years ago •via X (Twitter)

11 Comments

Logan Craft's profile picture
Logan Craft2 years ago

What if the error is at the bottom of the form? Maybe better to have some JavaScript that looks for the first error in the list by targeting the form then getting the first element with .error class or something…

Caleb Porzio's profile picture
Caleb Porzio2 years ago

Yeah, I toyed with that too: x-init="$el.closest('form').querySelector('[aria-invalid=\'true\']').closest('label').scrollIntoView()" Kind of a mouth-full lol, but works great

Tuginho's profile picture
Tuginho2 years ago

Great for UX!

Swan Company Inc's profile picture
Swan Company Inc2 years ago

Your making life too easy for people like me but I'll take it! Honestly, I can't wait to show what I've been building with the TALL stack and the day it's profitable I'll be giving back as much as I can for everyone's hard work.

𝕽𝖎𝖉𝖜𝖆𝖓𝖚𝖑𝖑𝖆𝖍🥰's profile picture
𝕽𝖎𝖉𝖜𝖆𝖓𝖚𝖑𝖑𝖆𝖍🥰2 years ago

Cool stuff, Caleb🥰

Ryan Bilesky's profile picture
Ryan Bilesky2 years ago

Why can't more apps do this? With how many times I click submit and get an error but don't know it because it's up at the top where am already scrolled passed and take a second to realize what's going on, I can only imagine how normal users must feel.

Λlex Wulf's profile picture
Λlex Wulf2 years ago

@filamentphp also supported by you?

Ifeanyichukwu John's profile picture
Ifeanyichukwu John2 years ago

Well done @calebporzio

Amit Mandaviya🇮🇳 | Full Stack| React JS| Laravel's profile picture
Amit Mandaviya🇮🇳 | Full Stack| React JS| Laravel2 years ago

@PovilasKorop That's literally what mostly we need when we have long forms.

Vincent Uche's profile picture
Vincent Uche2 years ago

Cool. What about a smooth scroll?

Caleb Porzio's profile picture
Caleb Porzio2 years ago

Pretty easy to add!

Related Videos