I am appending a new row which can dynamically add new elements:
$('body').on('click','#add',function() {
++i;
$("#dynamic_field").append('<tr><td>
<select class="form-control select2"
id="leavers_trax_id['+i+']" name="addmore['+i+'][trax_id]">
<option value="" data-rule-required="true" data-msg-required="Department is required">
Trax Id
</option>
@foreach($employee_trax_id as $employee)
<option value="{{$employee->trax_id}}">{{$employee->trax_id}}</option>
@endforeach
</select></td><td>
<input type="number" name="addmore['+i+'][salary]" placeholder="Last Gross Salary"
class="form-control name_list" data-rule-required="true"
data-msg-required="Department is required"/></td><td>
<input type="date" name="addmore['+i+'][date]" placeholder="Date"
class="form-control name_list" data-rule-required="true"
data-msg-required="Department is required"/></td><td>
<button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
And I'm opening a modal on a submit button click to take an input for the email so the type for that is button. I want to check if any of the dynamically added fields are empty and if so, it should show a appropriate message, it could be a toastar as well, i cannot call the validate method onClickEvent:
<div class="col-12 button_div">
<div class="form-group text-center mt-2">
<button type="button" class="btn btn-primary" id="form_btn">
Submit
</button>
</div>
</div>