How to add validation for dynamically added fields in a form?

Viewed 34

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>
0 Answers
Related