8 Laravel Livewire Real Time Validation

[Music] let's walk on the validation using level livewire here we have two problem with this input field one is anyone can give all the long text and it is still going to save it next we can submit the empty form and you can see we have actually prevented by just giving this if statement this is working but still it's not giving any feedback so why not use the validation and if I send an empty form then it should return some error just like a normal validation yeah so normal lateral validation is going to work inside any component of livewire so here also and instead of this I can just just say this validate and the field you have here which is the new comment which we will set so new comment I can say this is required okay so we have done that and we have this new comment which is wired with the Lazy new comment and now if I try to hit add you can see nothing is happening although if I can open the network tab you can see we are giving a request but it is not doing anything but what we need yeah this means validation is working it is not going outside this validation or after this validation and it has stopped here that's good but we need to show error also okay so we can simply use the blade directive of act error to show the error so let us copy this and go on this and just about the form I can show it and I can make it text read 500 and text extra small so whenever we have a new comment then I can show the message for that particular otherwise not okay that's good go here and click on add now you can see we are giving this post request with data previous data and on the action we can see we have method of add comment but we are not sending anything new comment is null because new comment is null it is giving us the result with this kind of this kind of comment which is actually a normal level comment so here we can find error back and inside error bag we have a new comment and that new comment field is required in that way we are having this error cool but you know with this level livewire we have a real-time validation also that's super easy and that actually worked whenever we update the field so whenever we type something here and hit enter it's giving a request but what if we need actually if I remove this lazy part from here so it was going to give a jex request every keystroke so send a jex and I need to refresh the page ok so send a checks and you can see it's giving 6 at access request or edge exit question here and this is going to make our validation real-time because now every time we have something on the update something some update on the component then this updated hook is going to trigger there are many hooks lifecycle hooks for the components which is mount we have already used the mound and hydrated updating updating particular field then updated that means it is updating done and the finally updated for everything ok so in our real-time validation we're in a real-time validation we can use this updated let's use it just above add comment we can have this and we need to use the same validation and the same validation will be like here it is required that means now whenever I make changes in our form input field it will send an actual request and that will validate so this should be not going to give because as soon as I type it's filling it but as soon as I hit backspace and if I am not giving anything you can see it has given the simple error which is because of this edge EXA quest and again if you want to limit the actual edge ex request you can simply use dot d bounds bounds dot 500 milliseconds so every 500 millisecond it's going to send the request so now get back and yeah so just three adjectives but lots of keystrokes next big thing I need to show you is what if I give big text and if we need to prevent that this should not be the case so again we have the validation and we can add max of two five five let's say this will be the case refresh this page paste it and try to add it is new comment may not be greater than 255 and let's make this also a real time because now I can make this same max to 5/5 here refresh the page and then as soon as I paste and you can see as soon as I pasted it it's giving error and then I try to remove some and yeah there is no error and if I cross the limit of 255 like here I can cross and it took a long text and yeah I crossed it so now we have the real-time validation error and every time we hit a keystroke we are going to send a Axios request with the data it's normal thing but because we have this on the updated field we are getting this real-time validation

Channel: Bitfumes

Views: 23,877

Keywords: laravel livewire, laravel livewire tutorial, laravel livewire crud, livewire crud, laravel livewire spa, laravel livewire examples, laravel livewire español, laravel livewire full course, laravel livewire autocomplete, laravel livewire course, laravel livewire introduction, laravel livewire quickstart, laravel livewire validation

Id: DWzzU3pG1GY

Length: 6min 57sec (417 seconds)

Published: Sat May 09 2020