I have to generate dynamic inputs using jquery and validate it by using jquery validation plugin. The problem is it is just validating only first input field.
I have tried all the thing like changing validation rules, changing the version, changing the loops, etc
My Current Jquery version are as following.
jquery v3.2.1 validation v1.11.1 additional methods 1.16.0
<form method="POST" id="ovi" name="ovi" action="{{ route('booking.store') }}">
@csrf
// $BookingRequest->number_of_adults returns 3
@for($i=1; $i<=$BookingRequest->number_of_adults; $i++)
<div class="col-sm-5 col-12">
<div class="form-group">
<input id="first_name_{{$i}}" value="{{ old('first_name') }}" style="height:40px; font-size:0.9rem; border-radius:1px;" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name[]" placeholder="First Name" >
@error('first_name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<div class="errormsg"></div>
</div>
</div>
@endfor
//My JavaScript code
$(document).ready(function() {
$.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]{3,60}$/);
});
$("#ovi").validate({
rules:{
"first_name[]":{
required: true,
alpha : true,
}
},
messages:{
"first_name[]":{
required: "* first name is required",
alpha : "* Format is invalid",
}
}
});
});