I am trying to display the error div below a certain field if the validation for that input failed along with the previous input on the designated field.
Here's my progress so far:
in my controller file inside the store function (UserController > store):
public function store(Request $request)
{
$validationRules = array(
'first_name' => 'required|min:2|max:150',
'last_name' => 'required|min:2|max:150',
'gender' => 'required',
'birthdate' => 'required',
'user_contact' => 'required|min:10|max:20',
'email' => 'required|unique:users|max:150'
);
$validator = Validator::make($request->all(), $validationRules);
if($validator->fails()){
//dd($validator)
return redirect(route('user.create'))->withInput()->withErrors($validator);
}
.....
When I try to print $validator using dd() it does not have any problem and it contains the validation error messages, all inputs and validation rules.
Here's my snippet code in the create.blade.php (view):
<form class="form-horizontal" method = "POST" action = "{{ route('user.store') }}">
@csrf
<div class="form-group row">
<div class="col-md-12">
<strong><font color="red">*</font> Indicates required fields.</strong>
</div>
<div class="col-md-4">
<label for="u_fname" class="col-sm-6 col-form-label">First Name <font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_fname') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
<input type="text"
class="form-control"
id="first_name"
name = "first_name"
value="{{ old('first_name') }}"
minlength="2"
maxlength="150"
required/>
@error('first_name')
<div class="alert-danger">{{$errors->first('first_name') }} </div>
@enderror
</div>
</div>
<div class="col-md-4">
<label for="u_lname" class="col-sm-6 col-form-label">Last Name <font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_lname') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
<input type="text"
class="form-control"
id="last_name"
name = "last_name"
value="{{ old('last_name') }}"
minlength="2"
maxlength="150"
required/>
@error('last_name')
<div class="alert-danger">{{$errors->first('last_name') }} </div>
@enderror
</div>
</div>
<div class="col-md-4">
<label for="u_gender" class="col-sm-6 col-form-label">Gender <font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_gender') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-venus-mars"></i></span>
</div>
<select class = "form-control" id = "gender" name = "gender" required>
<option value = "M">Male</option>
<option value = "F">Female</option>
</select>
@error('gender')
<div class="alert-danger">{{$errors->first('gender') }} </div>
@enderror
</div>
</div>
<div class="col-md-4">
<label for="u_birthdate" class="col-sm-6 col-form-label">Birth Date <font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_birthdate') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text"
class="form-control"
id="birthdate"
name = "birthdate"
value="{{ old('birthdate') }}"
required/>
<div class="alert-danger">{{$errors->first('birthdate') }} </div>
</div>
</div>
<div class="col-md-4">
<label for="u_contact" class="col-sm-6 col-form-label">Contact Number <font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_contact') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-phone"></i></span>
</div>
<input type="text"
class="form-control"
id="user_contact"
name = "user_contact"
value="{{ old('user_contact') }}"
onkeyup="this.value=this.value.replace(/[^\d]/,'')"
minlength="10"
maxlength="20"
required/>
@error('user_contact')
<div class="alert-danger">{{$errors->first('user_contact') }} </div>
@enderror
</div>
</div>
<div class="col-md-4">
<label for="u_email" class="col-sm-6 col-form-label">E-Mail Address<font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_email') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-at"></i></span>
</div>
<input type="email"
class="form-control"
id="email"
name = "email"
value="{{ old('email') }}"
minlength="10"
maxlength="150"
required/>
@error('email')
<div class="alert-danger">{{$errors->first('email') }} </div>
@enderror
</div>
</div>
<div class="col-md-4">
<label for="u_utype" class="col-sm-6 col-form-label">User Type <font color="red">*</font></label>
<div class="input-group mb-2 {{$errors->has('u_utype') ? 'has-error' : ''}}" >
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user-cog"></i></span>
</div>
<select class = "form-control" id = "u_type_input" name = "u_type_input" required>
<option value = "E">Employee</option>
<option value = "A">Administrator</option>
</select>
@error('u_type_input')
<div class="alert-danger">{{$errors->first('u_type_input') }} </div>
@enderror
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-default float-right" name = "submit_create" id = "submit_create">Submit</button>
</div>
</form>
Notice that I removed the autocomplete=off because I read some posts that this causes the problem but still doesn't work in my case.
I've been reading all stackoverflow posts related on my problem but most of the scenario problem occured on Laravel 5 and I use the current latest version of Laravel Framework which is Laravel 8.
What seems to be the cause of the problem? and how should I retain the old/previous inputs and show the error messages after the failed validation? I suspect that the cause of the problem lies on the blade file or related to the resources like bootstrap.
