Putting validation on dynamically added rows

Question

I have an add row button that added a new row when clicking. I want to remove validation on the newly added row(only for address) depending onchange of the dropdown value. Find the image for reference.

When I select Child_1 or Child_2 from the dropdown, then every other field should be required before submitting the form.

$("#add_nominee").click(function(e){ 
      e.preventDefault();       $("#nominee_section").clone().find(":input").val("").end().appendTo(".attach_nominee");       
    
    });
    //Remove Nominee
     $("#rem_nominee").click(function(e){ 
       e.preventDefault();
       $('.attach_nominee').children().last().remove();
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nominee_section">
                                <table>
                                    <tbody> 
                                        <tr>
                                            <input name="user_candidate[user_nominees_attributes][user_id][]" type= "hidden" value="<%=current_user.id%>" class= 'form-control' >
                                            <input  name="user_candidate[user_nominees_attributes][nominee_for][]" type= "hidden" value="PF", class= 'form-control' >
                                            <td style="width:197px"><input class="form-control" multiple="multiple" type="text" name="user_candidate[user_nominees_attributes][name][]" id="user_candidate_user_nominees_attributes_0_name" required="true"></td>
                                            <td style="width:108px">
                                            <select class="form-control relation_text_field" name="user_candidate[user_nominees_attributes][relation][]" id="user_candidate_user_nominees_attributes_0_relation" required="true">
                                                <option value="Father">Father</option>
                                                <option value="Mother">Mother</option>
                                                <option value="Spouse">Spouse</option>
                                                <option value="Child_1">Child 1</option>
                                                <option value="Child_2">Child 2</option>
                                            <td style="width:189px"><input class="form-control" multiple="multiple" type="date" name="user_candidate[user_nominees_attributes][dob][]" id="user_candidate_user_nominees_attributes_0_dob" required="true"></td>
                                            <td style="width:194px"><input class="form-control" multiple="multiple" type="text" name="user_candidate[user_nominees_attributes][share][]" id="user_candidate_user_nominees_attributes_0_share" required="true"></td>
                                            <td style="width:197px"><input class="form-control guardian_text_field" multiple="multiple" type="text" name="user_candidate[user_nominees_attributes][guardian][]" id="user_candidate_user_nominees_attributes_guardian_0" required="true"></td>
                                            <td style="width:199px"><textarea class="form-control" multiple="multiple" name="user_candidate[user_nominees_attributes][address][]" id="user_candidate_user_nominees_attributes_2_address" required="true"></textarea></td>
                                        </tr>
                                    </tbody>
                                </table>
                              </div>
                              <div class="attach_nominee"></div><br>
                              <a href="#" class="btn btn-success pull-right" id="add_nominee" style="margin-right: 16px"><i class="fa fa-ok-sign"></i> Add Nominee</a>
                              <a href="#" class="btn btn-danger pull-right" id="rem_nominee" style="margin-right: 16px"><i class="fa fa-ok-sign"></i> Remove Nominee</a>

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Justinas, Nov 20 '21 at 06:45

DRA · Answer 1 · 2021-11-20T20:07:06.703

You can check every input separately based on what you want. Also, you can trim them and do other things if necessary. Run this code on submit. It's better to use a separate function. If you add inputs dynamically you can call the function after creation. It depends on the context.


if( $('.relation_text_field').val() == 'Child_1' ||  $('.relation_text_field').val() == 'Child_2'){

    $('#nominee_section table input , #nominee_section table textarea').each(function(){
    
        // if ($(this).is(':text') && $(this).val() == ''){    
        //     $(this).css('border','1px solid red')
        // }else if($(this).is('[type="date"]') && $(this).val() == ''){
        //     $(this).css('border','1px solid red')
        // }else if($(this).is('textarea') && $(this).val() == ''){
        //     $(this).css('border','1px solid red')
        // }
        if($(this).val()== ''){
          $(this).css('border','1px solid red')
        }
    })
    }else { //ok
    $('#nominee_section table input, #nominee_section table textarea').each(function(){
      $(this).css('border','1px solid black')
    })
}

Similarly you can use onChange:

$('.relation_text_field').on('change', function() {  

    if( $('.relation_text_field').val() == 'Child_1' ||  $('.relation_text_field').val() == 'Child_2'){

        $('#nominee_section table input , #nominee_section table textarea').each(function(){
        
            if($(this).val()== ''){
              $(this).css('border','1px solid red')
            }
        })
        }else { //ok
        $('#nominee_section table input, #nominee_section table textarea').each(function(){
          $(this).css('border','1px solid black')
        })
    }
});

Putting validation on dynamically added rows

1 Answers1