How do i set focus on an invalid input field - laravel

Question

I have an input; it's a string type of input. When I put an invalid input on it, I want it to focus on that invalid input field because the input is wrong, and I have to do a correct input on that invalid input field. How do I do it??
<form action="{{url('/store')}}" method="POST">
#csrf
<div class="form-group">
<label>NIK</label>
<input type="text" id="kredit_nik" name="kredit_nik" class="form-control" autocomplete="off"
value="{{old('kredit_nik')}}" placeholder="Contoh : 3152021502002002">
</div>
#if ($errors->first('kredit_nik'))
<div class="alert alert-danger">{{$errors->first('kredit_nik')}}</div>
#endif
<br>
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" id="kredit_name" name="kredit_name" class="form-control" autocomplete="off"
value="{{old('kredit_name')}}" placeholder="Contoh : Nathanael Budiman">
</div>
#error ('kredit_name')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
<br>
</form>

Answer 1

You can use Laravel's provided #error blade directive to check if the validation error exists for an input/attribute and combine it with Bootstrap's error class as:
#error('input-name') is-invalid #enderror
Example:
<input type="text" required class="form-control #error('input-name') is-invalid #enderror" name="input-name" id="input-name" value="{{ old('input-name') }}">
Now, to scroll to the error field you can use jquery to scroll to the first error field:
Add this before the closing </body> tag:
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function() {
var errors = $('.is-invalid')
if (errors.length) {
$(document).scrollTop(errors.offset().top)
}
});
</script>
Scrolling code is partially taken from: https://github.com/1000hz/bootstrap-validator/issues/52#issuecomment-71472662 (original credit)