How to all array inputs in laravel and displaying the validation error below of the fields

My goal here is when I hit the submit button, all fields will validate and will automatically display a validation error below of each input fields, for now when I try submitting the form without putting any data to the fields, only the first input field has an error message displaying below of the input field and the other fields does not have only after I submit the form and then I click the input fields the message will show.

I tried to look the solution here but unfortunately it doesn't work for me.

• How to validate array in Laravel?
• How do I validate an array of integers in Laravel
• Validate array of inputs in form in Laravel 5.7

I have a form that looks like this

<div class="form-group">
  <input type="text" name="ref_name[]"> 
</div>
<div class="form-group">
  <input type="text" name="ref_name[]"> 
</div
<div class="form-group">
  <input type="text" name="ref_name[]"> 
</div
<div class="form-group">
  <input type="text" name="ref_name[]"> 
</div
<div class="form-group">
  <input type="text" name="ref_name[]"> 
</div>

This is the rule/code on my request class

 'ref_name' => 'array',
 'ref_name.*' => 'required|distinct'

I'm using this https://packagist.org/packages/proengsoft/laravel-jsvalidation as my validation plugin on my laravel project.

The laravel version project im working on is 5.2

via Chebli Mohamed