Make Laravel Validation Messages More 'Human'

Let's talk about Laravel validation from a UX point of view. How to show the error messages? How to prevent them from happening? How can we help our website visitors?

00:00 Intro: Laravel Breeze and UI
01:02 Do you REALLY Know HTML?
05:29 Where/How to Show Errors?
06:53 Don't forget "old" values
07:36 Customize Error Messages
09:39 500 Error in More Human Way

- - - - -
Support the channel by checking out our products:

[intipontt]

About the asterisk (*) for required fields: There is a very semantic way of adding them to your html. Add a class to your label for required fields (example: <label for="required_field" class="required">) and then, in your css, add the following:

label.required::after {
content: '*';
color: red;
padding-left: 0.25rem;
}

Ideally, you'd want to select the label that has an input with the required attribute but css doesn't have anything like :has() natively.

In any case, now you don't have to worry about manually adding asterisks here and there. And it helps you keep things consistent. What if instead of an asterisk you want to place a symbol or a message in every required field? Just edit the content css property. You could even add a background-image but that requires more work. Same idea applies for optional fields.

label.optional::after {
content: '(optional)';
color: gray;
font-style: italic;
padding-left: 0.25rem;
}

[chengkangzai]

I like the way you say "What !? HTML?" 1:09 hahaha

[GabrielJambert]

I learnt a lot in the 10 minutes than I ever had on hour-end lectures. Thank you.

[abdulrehmandar]

I really don't know custom validation messages exit. I just change the message from the request class. Learning something new everyday from you. Thanks for the best content.

[MrDragos]

Thank you for your videos. They are really great.
I hate doing validations so much, especialy composing a mesage to show. Laravel default messages are way better than my default message that I used before: "Something went wrong, try again".

[DPBGaming]

Wow! That's crazy.. Only last night was I messing around and trying to change the messages for the error pages. You produce some great content!

[nsimimmmdov]

Is there anyway to manually throw exception with old inputs?

[matheusalencar]

Should i validate "password" and "confirm password" (check if they're the same) on both frontend and backend?

[lucasj.pereira]

One thing that is also useful for errors like 500 is to send an email or any notification for the team about what happened with details and logs. I'm still looking about how to do that

[zordmax]

Tnx, very useful video. I am now doing validation and show errors in my project

[ricko]

I didn't know color could be an input type 1:42 thanks for the tip!

[DungHoangTri]

Thanks for your useful clip. I have a question. How I can hide message on typing into required input text after server-side validation. For example: @error('email') [message for required field] @enderror. The input didnt change the status and error message still displayed on typing. What's your opinion?

[kikky]

I am new to Livewire and I've tested some of your live components posted on your website. In average, your response time from Livewire is around 50ms (for example in inline editing or add/edit using modal). I can't get response less than 150-200ms on local environment which makes it look really sluggish and not wanting to continue with this... How to improve the response speed?

[ankurdwivedi]

Thank You sir for making such a informative and easy concept videos on Laravel. Please make some videos on Stripe Subscriptions, Payment and Appointments type Videos in Laravel.

[biliyonnet]

Laravel: 500
Me: is that all you can say?
Laravel: wait! server error.

[GergelyCsermely]

Thank You. I think is is very usefull, to get more backend informations also about basic things like browser validation. I used in the past, but now days not. But maybe is it better conbine like in Your example. Br.

[paulfontaine]

I was a fan of html input type until i used a tabbed input form and the form would not submit because an email input was not valid. The problem was that the browser input validation error message was hidden in a tab that was not visible. So clicking submit did nothing and gave no visible user feedback.

[nabeelyousafpasha]

Don't know. How community would Thank you 🙏

[МиткоЖечев]

Breeze works with MessageBag, $errors->all() wouldn't work.

[diatm]

Please Sir Laravel 8 + Vue 3 + sanctum