Laravel 8 E-Commerce - Admin Adding Validation to the Form

In this video, we will learn about adding validation to the form.

In our previous video, we created an add category form. If we click on the submit button without entering any details, it will give us an error.

Okay, so to avoid this error, let's add validation to this form. For adding validation, switch to the project and open the AdminAddCategoryComponent.php class file.

Inside this file, you can see the storeCategory function. Add the following code:

$this->validate([
	'name' => 'required',
	'slug' => 'required|unique:categories'
]);  

Now, let's add the updated Livewire lifecycle hook method:

public function updated($fields)
{
	$this->validateOnly($fields,[
		'name' => 'required',
		'slug' => 'required|unique:categories'
	]);
}

Open the admin-add-category-component.blade.php view file and add the @error directive as follows:

<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, it's done. Let's check it. Switch to the browser and refresh the page.

Now, let's click on the submit button. And here you can see the validation message.

Now, let's enter an existing category name. So, copy this category name and paste it here. Now, click on submit. And this time, you can see the error "The slug has already been taken."

Now, let's enter any other category name and click on submit. And here you can see the message "Category has been added successfully."

Now, let's add validation to the category edit form. So, for that, go to the AdminEditCategoryComponent.php class file.

And inside the updateCategory function, add the following code:

$this->validate([
	'name' => 'required',
	'slug' => 'required|unique:categories'
]);

Now, let's add the 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, let's 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, it's done. Let's check it. Switch to the browser and refresh the page.

Now, edit any category. And let's remove the category name. And now, click on submit. You can see here the validation message.

All right, now let's add 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, let's 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, let's check it. So, switch to the browser and click on the "Add New Product" link.

Now, click on the submit button without entering any details. And here you will see the validation error message.

If you will enter invalid product details, then you will see the validation message.

Now, add validation to the edit product form. For that, let's open the AdminEditProductComponent.php class file and add the following code in the 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, let's display the individual 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, let's check it. So, switch to the browser and refresh the page.

Now, edit any product, so click on the edit link.

Now, let's enter any invalid details. Let's add a character inside the regular price.

And now, click on the "Update" button. You will see the validation message.

Now, remove the price, and it's showing this is a required field.

After entering the valid product details, the product will have been updated successfully.

So, in this way, you can add validation to the form.