In Laravel how to show error message beside specif

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>