我的验证不适用于我的动态输入

时间:2018-07-17 02:13:48

标签: javascript jquery html validation

它仅验证非动态输入,而忽略动态输入。 我使用了一个javascript代码,当单击下一个按钮时,如果输入为空,则我的输入会更改其颜色并显示模式。但是,当我单击添加更多按钮以添加动态输入时,它是空的,而我按下了下一个按钮,则直接转到下一页并忽略空白字段

           <script type="text/javascript">
            function validate_training_next()
{
    if(document.getElementById('txtSeminar').value=='')
        {
        $('#\\#txtSeminarModal').modal('show');                
        document.getElementById("txtSeminar").style.borderColor="red";
        document.getElementById("txtSeminar").style.backgroundColor="yellow";
        document.getElementById("txtSeminar").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('txtSeminarDate').value=='')  
     {  
        $('#\\#txtSeminarDateModal').modal('show');
        document.getElementById("txtSeminarDate").style.borderColor="red";
        document.getElementById("txtSeminarDate").style.backgroundColor="yellow";
        document.getElementById("txtSeminarDate").style.borderWidth=2;
       return false;  
     } 
    else if (document.getElementById('txtOrganization').value=='')
        {
        $('#\\#txtOrganizationModal').modal('show');
        document.getElementById("txtOrganization").style.borderColor="red";
        document.getElementById("txtOrganization").style.backgroundColor="yellow";
        document.getElementById("txtOrganization").style.borderWidth=2;
        return false;
        }
            else if (document.getElementById('txtOrganizationDate').value=='')
        {
        $('#\\#txtOrganizationDateModal').modal('show');
        document.getElementById("txtOrganizationDate").style.borderColor="red";
        document.getElementById("txtOrganizationDate").style.backgroundColor="yellow";
        document.getElementById("txtOrganizationDate").style.borderWidth=2;
        return false;
        }

          else
        {

        document.getElementById("nextSeminarValidate").onclick = openTab(event,'characterTab');
        }

}

//this is the code that shows the modal and changes the input color if it is empty
 <button type="button" name="add_more_trainings" id="add_more_trainings" class="btn btn-success" >Add More Trainings</button>
            <br><br>
            <div class="table-responsive">
            <table class="table table-bordered" id="trainings_dynamic_field">

              <tr>
                 <th>Seminars Attended</th>
                 <th>Date</th>
                 <th>Name of Organization</th>
                 <th>Date</th>
                 <th></th>
              </tr>
              <tr>
                <td><input type="text" name="txtSeminar[]" id="txtSeminar" class="form-control name_list" /></td>
                <td><input type="date" name="txtSeminarDate[]" id="txtSeminarDate" class="form-control name_list" /></td>
                <td><input type="text" name="txtOrganization[]" id="txtOrganization" class="form-control name_list" /></td>
                <td><input type="date" name="txtOrganizationDate[]" id="txtOrganizationDate" class="form-control name_list" /></td>
                
                <td></td>
              </tr>
            </table>
            
<button type="button" id="next_seminar" name="next_seminar" class="btn btn-success form-control" style="width:10%; float: right;" onclick=" return(validate_training_next()); openTab(event, 'characterTab');">Next</button>

  <script>
  $(document).ready(function(){
  var i=1;
  $('#add_more_trainings').click(function(){
    i++;
    $('#trainings_dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="txtSeminar[]" id="txtSeminar" class="form-control name_list" /></td><td><input type="date" name="txtSeminarDate[]" id="txtSeminarDate" class="form-control name_list" /></td><td><input type="text" name="txtOrganization[]" id="txtOrganization" class="form-control name_list" /></td><td><input type="date" name="txtOrganizationDate[]" id="txtOrganizationDate" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove_trainings">X</button></td></tr>');
  }); 
  
  $(document).on('click', '.btn_remove_trainings', function(){
    var button_id = $(this).attr("id"); 

    
    $('#row'+button_id+'').remove();
  });
});
  </script>
  
  //here's my code for adding dynamic inputs
  

1 个答案:

答案 0 :(得分:0)

文档中不能有多个具有相同ID的元素。您需要将其更改为类。

$(document).ready(function() {
    var i = 1;
    $('#add_more_trainings').click(function() {
        i++;
        $('#trainings_dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="txtSeminar[]" class="form-control name_list txtSeminar" /></td><td><input type="date" name="txtSeminarDate[]" class="txtSeminarDate form-control name_list" /></td><td><input type="text" name="txtOrganization[]" class="txtOrganization form-control name_list" /></td><td><input type="date" name="txtOrganizationDate[]" class="txtOrganizationDate form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove_trainings">X</button></td></tr>');
    });

    $(document).on('click', '.btn_remove_trainings', function() {
        var button_id = $(this).attr("id");


        $('#row' + button_id + '').remove();
    });
});


function validate_training_next() {
  if ( document.getElementsByClassName('txtSeminar').value == '') {
        //$('#\\#txtSeminarModal').modal('show');
         document.getElementsByClassName("txtSeminar").style.borderColor = "red";
         document.getElementsByClassName("txtSeminar").style.backgroundColor = "yellow";
         document.getElementsByClassName("txtSeminar").style.borderWidth = 2;
        return false;
    } else if ( document.getElementsByClassName('txtSeminarDate').value == '') {
        $('#\\#txtSeminarDateModal').modal('show');
         document.getElementsByClassName("txtSeminarDate").style.borderColor = "red";
         document.getElementsByClassName("txtSeminarDate").style.backgroundColor = "yellow";
         document.getElementsByClassName("txtSeminarDate").style.borderWidth = 2;
        return false;
    } else if ( document.getElementsByClassName('txtOrganization').value == '') {
        $('#\\#txtOrganizationModal').modal('show');
         document.getElementsByClassName("txtOrganization").style.borderColor = "red";
         document.getElementsByClassName("txtOrganization").style.backgroundColor = "yellow";
         document.getElementsByClassName("txtOrganization").style.borderWidth = 2;
        return false;
    } else if ( document.getElementsByClassName('txtOrganizationDate').value == '') {
        $('#\\#txtOrganizationDateModal').modal('show');
         document.getElementsByClassName("txtOrganizationDate").style.borderColor = "red";
         document.getElementsByClassName("txtOrganizationDate").style.backgroundColor = "yellow";
         document.getElementsByClassName("txtOrganizationDate").style.borderWidth = 2;
        return false;
    } else {

         document.getElementsByClassName("nextSeminarValidate").onclick = openTab(event, 'characterTab');
    }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="add_more_trainings" id="add_more_trainings" class="btn btn-success" >Add More Trainings</button>
                <br><br>
                <div class="table-responsive">
                <table class="table table-bordered" id="trainings_dynamic_field">

                  <tr>
                     <th>Seminars Attended</th>
                     <th>Date</th>
                     <th>Name of Organization</th>
                     <th>Date</th>
                     <th></th>
                  </tr>
                  <tr>
                    <td><input type="text" name="txtSeminar[]" class="form-control name_list txtSeminar" /></td>
                    <td><input type="date" name="txtSeminarDate[]" class="txtSeminarDate form-control name_list" /></td>
                    <td><input type="text" name="txtOrganization[]" class="txtOrganization form-control name_list" /></td>
                    <td><input type="date" name="txtOrganizationDate[]" class="txtOrganizationDate form-control name_list" /></td>
                    
                    <td></td>
                  </tr>
                </table>
                
    <button type="button" id="next_seminar" name="next_seminar" class="btn btn-success form-control" style="width:10%; float: right;" onclick=" return(validate_training_next()); openTab(event, 'characterTab');">Next</button>