Laravel Livewire Course - Validate data - CRUD
Another important factor is form validation the same structure that we used with basic Laravel with the handling of validations in separate classes or through the request can be done locally in the Livewire component
To validate in Livewire we have to define a protected property called rules for which we have to define the validation rules
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable"
];It is important to note that the keys of the rules have to be the properties you are using in the wiremodel and not the columns or properties of the model you are managing apart from this you have to call the validate method to apply the validations otherwise you show the possible errors using the blade error directive
Case study
Lets modify the component class as
class Save extends Component
{
public $title;
public $text;
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
];*
***
public function submit()
{
// validate
$this->validate();
$this->category = Category::create(
[
'title' => $this->title,
'slug' => str($this->title)->slug(),
'text' => $this->text,
]
);
***In which you can see the changes we indicated above the rules property and the use of the validate method to validate the data
In the view component we show the errors
<div>
<form wire:submit.prevent="submit">
<label for="">Título</label>
@error('title')
{{$message}}
@enderror
<input type="text" wire:model="title">
@error('text')
{{$message}}
@enderror
<label for="">Texto</label>
<input type="text" wire:model="text">
<button type="submit">Enviar</button>
</form>
</div>With this if we send an invalid form we will see the errors on the screen
Video Transcript
To apply validations in Kivewire is very simple since Remember that I say that in Livewire they are components which is what we are working on So here you can see it Here we have a property that works Exactly the same as what we did in the request classes Here we place the validations For the rest here we place rules for another time because it is an internal property We will see others later but this one comes from the first one and we place our rules So this is not automatically validated if we do not have to do it at the code level Here we place the validate which is an internal method instead of the Livewire component class and they are automatically validated and it works the same way as it did when we did the injection here
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
];*Lets test that then to see a little problem we have here Im going to reload if we give a same Notice that its going to give a nice error here since it indicates to you well the part of integrity that is violating what it places Lets go there surely it is the title that cannot be empty as you can see here so lets start from this well apply the validations here and I start from there because were not going to show the errors yet So its important to see that we have that lock and here were going to declare the property is of type protected Well I think it can be any type there you can test it since in the end it is handled here internally to this class and here we place them we place title here the validations are again the typical whatever you want here Im going to place required which what is well the typical required a minimum length of about two and a maximum length of about 255 which I think was the maximum length that I defined for the rest to the text Im going to indicate that it can be of type null Although you put what you want here we define it
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
];*and here we are going to use it because if we do not use it we are not doing anything it is called validate there we have it and we are going to see we return here again I am going to start from this a completely clean field and notice that it no longer gives the exception because the validations are working and what this does is stop the execution that comes later as you can see this returns a false and therefore the execution does not continue So if we place an invalid form here it will not place anything I give a sen here in principle it was created I think you could see an update here in my terminal I think it would be this one which indicates that it was created we check the category part here and there we have it so that is how easy the validations are in Livewire
Video Transcript
To apply validations in Livewire is very simple because they are components which is what we are working on so here you can see it Here we have a property that works exactly the same as what we did in the request classes here we place the validations for the rest here we place rules for another time because it is an internal property We will see others later but this one comes from the first one and we place our rules so this is not validated automatically if we do not have to do it at the code level Here we place the validate which is an internal method of the Livewire component class and they are validated automatically and it works the same way as it did when we did the injection here lets test that then
public function submit()
{
// validate
$this->validate();
$this->category = Category::create(To see a little problem that we have here Im going to reload if we give a same Notice that its going to give here a nice error since it indicates to you well the part of integrity that is violating what it places lets go there surely it is the title that cannot be empty as you can see here so lets start from this well apply the validations here and I start from that because were not going to show the errors yet So its important to see that we have that block and here were going to declare the property is of type protected Well I think it can be any type there you can test it since in the end its handled here internally to this class and here we place them we put title here the validations are again the typical whatever you want here Im going to put required which whats well the typical requires a minimum length of about two and a maximum length of about 255 which I think was the maximum length that I defined for the rest to the text Im going to indicate that it can be of type null Although you put what you want newel here we define it and here were going to use it since if we dont use it were not doing anything its called validate there we have it and we will see we return here again I will start from this with a completely clean field and notice that it no longer gives the exception because the validations are working and what this does is stop the execution that comes next
public function submit()
{
// validate
$this->validate();
dd(true);
$this->category = Category::create(As you can see this returns false and therefore the execution does not continue so if we place an invalid form here it will not place anything I give a sen here In principle I think you could see an update here in my terminal I think it would be this one which indicates that it was created We review the category part here and there we have it So thats how easy validations are in Livewire
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter