Removing the laravel error messages once the text field is clicked - php

Question

Currently I'm showing my form validation error messages in the front end blade under the relevant field.
But the messages are there until the user resubmit the form, they wont removed.
I want to hide each error message once the user clicks on the field (or in the most user friendly way).
This is form code for my register blade,
<form method="POST" action="{{ route('register') }}">
#csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('sentence.First Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-md-4 col-form-label text-md-right">{{ __('sentence.Last Name') }}</label>
<div class="col-md-6">
<input id="last_name" type="text" class="form-control #error('name') is-invalid #enderror" name="last_name" value="{{ old('name') }}" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('sentence.E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="text" class="form-control #error('email') is-invalid #enderror" name="email" value="{{ old('email') }}" autofocus>
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="moblie" class="col-md-4 col-form-label text-md-right">{{ __('Mobile') }}</label>
<div class="col-md-6">
<input id="mobile_1" type="tel" class="form-control #error('mobile') is-invalid #enderror" name="mobile" value="{{ old('mobile') }}" style="min-width: 330px;" autofocus>
#error('mobile')
<br/>
<span class="help-block" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="username" class="col-md-4 col-form-label text-md-right">{{ __('sentence.Username') }}</label>
<div class="col-md-6">
<input id="username" type="text" class="form-control #error('username') is-invalid #enderror" name="username" value="{{ old('username') }}" autofocus>
#error('username')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('sentence.Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control #error('password') is-invalid #enderror" name="password" >
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('sentence.Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" >
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('sentence.Register') }}
</button>
</div>
</div>
</form>

Answer 1

I think the most user-friendly way is to have client-side validation,
Security: Server-side validation
User friendly: Client-side validation
For client-side, you can use jQuery, In your case:
<script>
jQuery( document ).ready(function() {
// event for click on input (also you can use click)
//better to change form to .yourFormClass
$('form input[type=text]').focus(function(){
// get selected input error container
$(this).siblings(".invalid-feedback").hide();
});
});
</script>
Add this code before closing body tag,(Don't forget to use the jQuery library ),
Hope it helps