对动态添加的行进行验证

Question

我有一个添加行按钮，单击时会添加一个新行。我想根据下拉值的onchange 删除对新添加的行（仅用于地址）的验证。查找图片以供参考。

当我从下拉列表中选择 Child_1 或 Child_2 时，在提交表单之前应该需要所有其他字段。

$("#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>

Answer 1

您可以根据需要分别检查每个输入。此外，您可以修剪它们并在必要时做其他事情。在提交时运行此代码。最好使用单独的函数。如果您动态添加输入，您可以在创建后调用该函数。这取决于上下文。

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')
    })
}

同样你可以使用 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')
        })
    }
});