In this video we are going to learn about Adding Validation to the Form.
In our previous video we have created this add category form.
If I click on submit button without entering any details.
It will give us an error.
Ok so for avoiding this error lets add the validation to this form.
For adding the validation Switch to the project and lets open the AdminAddCategoryComponent.php class file.
Inside this file you can see here this is storeCategory function add the following code.
Now lets add here updated livewire lifecycle hook method
Now open admin-add-category-component.blade.php View file add the @error directive as following.
Now its done so lets check it.
So switch to the browser and refresh the page.
Now lets click on submit button.
And here you can see the validation message.
Now lets enter the existing category name
So copy this category name and paste here
Now click on submit
And this time you can see error The slug has already been taken.
Now lets enter any other category name and now click on submit
And here you can see the message category has been added successfully.
Now lets add the validation with category edit form.
So for that go to the AdminEditCategoryComponent.php class file
And inside updateCategory function add the following code.
Now lets add here updated livewire lifecycle hook method and add the following code.
Now go to the admin-edit-category-component.blade.php view file and inside this form lets display the validation message.
Now its done so lets check it.
So switch to the browser and refresh the page.
Now edit any category.
And lets remove the category name.
And now click on submit.
You can see here the validation message.
Allright, Now lets add the validation to the add new product form.
For that just open the AdminAddProductComponent.php Class file
And here inside this addProduct Function add the following code.
Now add the updated lifecycle hook method and add the following code.
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required|unique:products',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'image' => 'required|mimes:jpeg,png',
'category_id' => 'required'
]);
}
Now go to the admin-add-product-component.blade.php view file.
And inside the form lets display the validation message.
Now lets check it so switch to the browser and click on Add New Product link.
Now click on submit button without entering any details.
And here you will see the validatation error message.
If you will enter invalid product details, then you will see the validatation message.
Now add the validation with edit product form.
For that lets open AdminEditProductComponent.php class file and the following code in updateProduct method.
Now add the lifecycle hook method updated and add the following code.
Now go to the admin-edit-product-component.blade.php view file.
And inside the form lets display the individualy validation message so add the following code.
Now lets check it.
So switch to the browser and refresh the page.
Now edit any product so click on edit link.
Now lets enter any invalid details.
Lets add character inside the regular price.
And now click on Update button, You will see the validation message.
Now remove the price and its showing this is required field.
After entering the valid product details product will have updated successfully.
So in this way you can add validation to the form.
In our previous video we have created this add category form.
If I click on submit button without entering any details.
It will give us an error.
Ok so for avoiding this error lets add the validation to this form.
For adding the validation Switch to the project and lets open the AdminAddCategoryComponent.php class file.
Inside this file you can see here this is storeCategory function add the following code.
$this->validate([
'name' => 'required',
'slug' => 'required|unique:categories'
]);
Now lets add here updated livewire lifecycle hook method
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required|unique:categories'
]);
}
Now open admin-add-category-component.blade.php View file add the @error directive as following.
<form class=\"form-horizontal\" wire:submit.prevent=\"storeCategory\">
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Category Name</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Category Name\" class=\"form-control input-md\" wire:model=\"name\" wire:keyup=\"generateslug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Category Slug</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Category Slug\" class=\"form-control input-md\" wire:model=\"slug\" />
@error('slug') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\"></label>
<div class=\"col-md-4\">
<button type=\"submit\" class=\"btn btn-primary\">Submit</button>
</div>
</div>
</form>
Now its done so lets check it.
So switch to the browser and refresh the page.
Now lets click on submit button.
And here you can see the validation message.
Now lets enter the existing category name
So copy this category name and paste here
Now click on submit
And this time you can see error The slug has already been taken.
Now lets enter any other category name and now click on submit
And here you can see the message category has been added successfully.
Now lets add the validation with category edit form.
So for that go to the AdminEditCategoryComponent.php class file
And inside updateCategory function add the following code.
$this->validate([
'name' => 'required',
'slug' => 'required|unique:categories'
]);
Now lets add here updated livewire lifecycle hook method and add the following code.
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required|unique:categories'
]);
}
Now go to the admin-edit-category-component.blade.php view file and inside this form lets display the validation message.
<form class=\"form-horizontal\" wire:submit.prevent=\"updateCategory\">
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Category Name</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Category Name\" class=\"form-control input-md\" wire:model=\"name\" wire:keyup=\"generateslug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Category Slug</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Category Slug\" class=\"form-control input-md\" wire:model=\"slug\" />
@error('slug') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\"></label>
<div class=\"col-md-4\">
<button type=\"submit\" class=\"btn btn-primary\">Update</button>
</div>
</div>
</form>
Now its done so lets check it.
So switch to the browser and refresh the page.
Now edit any category.
And lets remove the category name.
And now click on submit.
You can see here the validation message.
Allright, Now lets add the validation to the add new product form.
For that just open the AdminAddProductComponent.php Class file
And here inside this addProduct Function add the following code.
$this->validate([
'name' => 'required',
'slug' => 'required|unique:products',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'image' => 'required|mimes:jpeg,png',
'category_id' => 'required'
]);
Now add the updated lifecycle hook method and add the following code.
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required|unique:products',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'image' => 'required|mimes:jpeg,png',
'category_id' => 'required'
]);
}
Now go to the admin-add-product-component.blade.php view file.
And inside the form lets display the validation message.
<form class=\"form-horizontal\" enctype=\"multipart/form-data\" wire:submit.prevent=\"addProduct\">
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Name</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Product Name\" class=\"form-control input-md\" wire:model=\"name\" wire:keyup=\"generateSlug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Slug</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Product Slug\" class=\"form-control input-md\" wire:model=\"slug\" />
@error('slug') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Short Description</label>
<div class=\"col-md-4\" wire:ignore>
<textarea class=\"form-control\" id=\"short_description\" placeholder=\"Short Description\" wire:model=\"short_description\"></textarea>
@error('short_description') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Description</label>
<div class=\"col-md-4\" wire:ignore>
<textarea class=\"form-control\" id=\"description\" placeholder=\"Description\" wire:model=\"description\"></textarea>
@error('description') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Regular Price</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Regular Price\" class=\"form-control input-md\" wire:model=\"regular_price\"/>
@error('regular_price') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Sale Price</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Sale Price\" class=\"form-control input-md\" wire:model=\"sale_price\" />
@error('sale_price') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">SKU</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"SKU\" class=\"form-control input-md\" wire:model=\"SKU\" />
@error('SKU') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Stock</label>
<div class=\"col-md-4\">
<select class=\"form-control\" wire:model=\"stock_status\">
<option value=\"instock\">InStock</option>
<option value=\"outofstock\">Out of Stock</option>
</select>
@error('stock_status') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Featured</label>
<div class=\"col-md-4\">
<select class=\"form-control\" wire:model=\"featured\">
<option value=\"0\">No</option>
<option value=\"1\">Yes</option>
</select>
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Quantity</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Quantity\" class=\"form-control input-md\" wire:model=\"quantity\"/>
@error('quantity') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Image</label>
<div class=\"col-md-4\">
<input type=\"file\" class=\"input-file\" wire:model=\"image\" />
@if($image)
<img src=\"{{$image->temporaryUrl()}}\" width=\"120\" />
@endif
@error('image') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Gallery</label>
<div class=\"col-md-4\">
<input type=\"file\" class=\"input-file\" wire:model=\"images\" multiple />
@if($images)
@foreach($images as $image)
<img src=\"{{$image->temporaryUrl()}}\" width=\"120\" />
@endforeach
@endif
@error('images') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Category</label>
<div class=\"col-md-4\">
<select class=\"form-control\" wire:model=\"category_id\">
<option value=\"\">Select Category</option>
@foreach ($categories as $category)
<option value=\"{{$category->id}}\">{{$category->name}}</option>
@endforeach
</select>
@error('category_id') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\"></label>
<div class=\"col-md-4\">
<button type=\"submit\" class=\"btn btn-primary\">Submit</button>
</div>
</div>
</form>
Now lets check it so switch to the browser and click on Add New Product link.
Now click on submit button without entering any details.
And here you will see the validatation error message.
If you will enter invalid product details, then you will see the validatation message.
Now add the validation with edit product form.
For that lets open AdminEditProductComponent.php class file and the following code in updateProduct method.
$this->validate([
'name' => 'required',
'slug' => 'required',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'category_id' => 'required'
]);
if($this->newimage)
{
$this->validate([
'newimage' => 'required|mimes:jpeg,png'
]);
}
Now add the lifecycle hook method updated and add the following code.
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'category_id' => 'required'
]);
if($this->newimage)
{
$this->validateOnly($fields,[
'newimage' => 'required|mimes:jpeg,png'
]);
}
}
Now go to the admin-edit-product-component.blade.php view file.
And inside the form lets display the individualy validation message so add the following code.
<form class=\"form-horizontal\" enctype=\"multipart/form-data\" wire:submit.prevent=\"updateProduct\">
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Name</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Product Name\" class=\"form-control input-md\" wire:model=\"name\" wire:keyup=\"generateSlug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Slug</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Product Slug\" class=\"form-control input-md\" wire:model=\"slug\" />
@error('slug') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Short Description</label>
<div class=\"col-md-4\" wire:ignore>
<textarea class=\"form-control\" id=\"short_description\" placeholder=\"Short Description\" wire:model=\"short_description\"></textarea>
@error('short_description') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Description</label>
<div class=\"col-md-4\" wire:ignore>
<textarea class=\"form-control\" id=\"description\" placeholder=\"Description\" wire:model=\"description\"></textarea>
@error('description') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Regular Price</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Regular Price\" class=\"form-control input-md\" wire:model=\"regular_price\"/>
@error('regular_price') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Sale Price</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Sale Price\" class=\"form-control input-md\" wire:model=\"sale_price\" />
@error('sale_price') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">SKU</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"SKU\" class=\"form-control input-md\" wire:model=\"SKU\" />
@error('SKU') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Stock</label>
<div class=\"col-md-4\">
<select class=\"form-control\" wire:model=\"stock_status\">
<option value=\"instock\">InStock</option>
<option value=\"outofstock\">Out of Stock</option>
</select>
@error('stock_status') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Featured</label>
<div class=\"col-md-4\">
<select class=\"form-control\" wire:model=\"featured\">
<option value=\"0\">No</option>
<option value=\"1\">Yes</option>
</select>
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Quantity</label>
<div class=\"col-md-4\">
<input type=\"text\" placeholder=\"Quantity\" class=\"form-control input-md\" wire:model=\"quantity\"/>
@error('quantity') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Image</label>
<div class=\"col-md-4\">
<input type=\"file\" class=\"input-file\" wire:model=\"newimage\" />
@if($newimage)
<img src=\"{{$newimage->temporaryUrl()}}\" width=\"120\" />
@else
<img src=\"{{asset('assets/images/products')}}/{{$image}}\" width=\"120\" />
@endif
@error('newimage') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Product Gallery</label>
<div class=\"col-md-4\">
<input type=\"file\" class=\"input-file\" wire:model=\"newimages\" multiple />
@if($newimages)
@foreach($newimages as $newimage)
@if($newimage)
<img src=\"{{$newimage->temporaryUrl()}}\" width=\"120\" />
@endif
@endforeach
@else
@foreach($images as $image)
@if($image)
<img src=\"{{asset('assets/images/products')}}/{{$image}}\" width=\"120\" />
@endif
@endforeach
@endif
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\">Category</label>
<div class=\"col-md-4\">
<select class=\"form-control\" wire:model=\"category_id\">
<option value=\"\">Select Category</option>
@foreach ($categories as $category)
<option value=\"{{$category->id}}\">{{$category->name}}</option>
@endforeach
</select>
@error('category_id') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label class=\"col-md-4 control-label\"></label>
<div class=\"col-md-4\">
<button type=\"submit\" class=\"btn btn-primary\">Update</button>
</div>
</div>
</form>
Now lets check it.
So switch to the browser and refresh the page.
Now edit any product so click on edit link.
Now lets enter any invalid details.
Lets add character inside the regular price.
And now click on Update button, You will see the validation message.
Now remove the price and its showing this is required field.
After entering the valid product details product will have updated successfully.
So in this way you can add validation to the form.
