In Laravel how to show error message beside specific field? - laravel

Question

I am new to laravel. I created a simple page where a user can add a product to the database. If the product title or amount is empty; I can also show the errors. But I want to show error right beside the specific field. If the title is empty the error will show beside the title field.
I searched and found solutions using JS and some other. But is there a way to achieve this using only laravel?
my view is like this
<form method="POST" action="create">
#csrf
<input type="text" name="title" placeholder="Product name"><br>
<textarea name="description" placeholder="Description"></textarea><br>
<input type="string" name="amount" placeholder="Price per unit"><br>
<button type="submit">Add Product</button>
</form>
#if(count($errors))
<ul>
#foreach($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
#endif
and my controller is like this
public function store()
{
$this->validate(request(),[
'title'=> 'required',
'amount' => 'required',
]);
$product = new Product;
$product->title = request('title');
$product->seller_id = Auth::guard('seller')->user()->id;
$product->description = request('description');
$product->amount = request('amount');
$product->save();
return redirect('/dashboard');
}

Answer 1

You need to check for errors and display wherever you want like given below
#if ($errors->has('title')) <p style="color:red;">{{ $errors->first('title') }}</p> #endif
and
#if ($errors->has('amount')) <p style="color:red;">{{ $errors->first('amount') }}</p> #endif
In your code for view it can be placed as
<form method="POST" action="create">
#csrf
<input type="text" name="title" placeholder="Product name">
#if ($errors->has('title')) <p style="color:red;">{{ $errors->first('title') }}</p> #endif <br>
<textarea name="description" placeholder="Description"></textarea><br>
<input type="string" name="amount" placeholder="Price per unit">
#if ($errors->has('amount')) <p style="color:red;">{{ $errors->first('amount') }}</p> #endif <br>
<button type="submit">Add Product</button>
</form>
Additionally you can also print custom messages by returning the error text from controller as shown below
$customMessages = [
'title.required' => 'The title field is required to be filled',
'amount.required' => 'The amount field should be completely filled'
];
$this->validate(request,[
'title'=> 'required',
'amount' => 'required',
], $customMessages);
Instead, if you want to show all the errors for a field you can print them as follows
#if ($errors->has('title'))
<p style="color:red;">
#foreach ($errors->get('title') as $errormessage)
{{ $errormessage }}<br>
#endforeach
</p>
#endif

Answer 2

All errors you can get in $errors array
just get them by input field name
Example:
<div class="form-group {{ $errors->has('title') ? 'has-error' : ''}}">
<label for="titile" class="col-sm-3 control-label">Title: </label>
<div class="col-sm-6">
<input class="form-control" placeholder="Product name" required="required" name="title" type="text" id="title">
{!! $errors->first('title', '<p class="help-block">:message</p>') !!}
</div>
</div>
Here, $errors->first('title') mean its getting the first index of title errors in $errors array.
in your view you can do this as:
<form method="POST" action="create">
#csrf
<input type="text" name="title" placeholder="Product name"><br>
{!! $errors->first('title', '<p class="help-block">:message</p>') !!}
<br>
<textarea name="description" placeholder="Description"></textarea><br>
{!! $errors->first('description', '<p class="help-block">:message</p>') !!}
<br>
<input type="string" name="amount" placeholder="Price per unit"><br>
{!! $errors->first('amount', '<p class="help-block">:message</p>') !!}
<br>
<button type="submit">Add Product</button>
</form>