通过检查每个动态创建的文本框是否为空来防止表单提交

Question

在这里，我试图在提交之前检查每一个dynamically创建的textboxes是否。emptyform

这是HTML代码，

<form>

<table class="table table-hover table-white">

  <thead>

    <tr>

        <th class="col-sm-1">Test ID</th>

        <th class="col-md-6">Test Name</th>

        <th style="width:100px;">Amount</th>

        <th> Action</th>

    </tr>

  </thead>

  <tbody id="rows">

    <tr>

        <td> <input class="form-control test_id" type="text" style="width:200px" id="test_id" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);"> </td>

        <td> <input  type="text" style="width:300px" class="form-control test_name"  readonly="" id="test_name"  onblur="checkname();" onkeyup="checkname();" onchange="checkname();"></td>

        <td> <input  type="text" style="min-width:100px" class="form-control amount" name="amount" readonly=""> </td>

        <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td> 

    </tr>

  </tbody>

</table>

                                                                 

                                                          

<span id="test_id_info" class="info text-danger"></span>

<div class="row">

   <div class="col-md-12">

       <div class="form-group">

          <label>Other Information</label>

          <textarea class="form-control" id="description"></textarea>

        </div>

    </div>

</div>

                                                     

<div class="text-center m-t-20">

  <input type="button" class="btn btn-primary submit-btn" name="pay"value="Generate Invoice" id="pay">

</div>

</form>

我想检查test_id textboxis empty。在动态生成textboxes那里之前，已经有一行textboxes包含test_id textbox. 我的问题是，在生成之前，它通过使用检查textboxasempty与否function，但在生成之后它不检查。我不知道我哪里出错了。

Answer 1

而不是使用 elementID 使用类名来获取元素的集合并遍历它们。我们这里遇到的问题是所有输入都具有相同的 ID，因此 jquery 将返回它找到的第一个元素并忽略其余元素，因为使用 ID 我们假设它在整个 DOM 中是唯一的function checkname(el){}$(document).ready(function(){var count=0;$(document).on('click','#add',function() {debugger;count++;&nbsp;var html= '';html += '<tr id="trrows">';html += '<td id="testid"> <input id="test_id" class="form-control test_id" type="text" style="width:200px" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);" onblur="sum(this);" onkeyup="sum(this);" onchange="sum(this);"> </td>';html += '<td id="testname"> <input id="test_name"&nbsp; type="text" style="width:300px" class="form-control test_name"&nbsp; readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';html += '<td id="amounts">&nbsp; <input id="amount" name="amount" type="text" style="min-width:150px" class="form-control amount"&nbsp; readonly="" > </td>';html += '<td><center> <a href="javascript:void(0)" class="text-danger font-18 remove" title="Remove" id="remove"><i class="fa fa-trash-o"></i></a></center> </td>';html +=&nbsp; '</tr>';$('#rows').append(html);&nbsp;&nbsp;});$(document).on('click','.remove',function() {$(this).closest("#trrows").remove();});});//&nbsp; generate bill&nbsp;$(document).on('click', '#pay', function () {var test_id = new Array();$('input[id="test_id"]').each(function() {test_id.push(this.value);});var amount = new Array();$('input[name="amount"]').each(function() {&nbsp; &nbsp; amount.push(this.value);});var p_id = $('#p_id').val();var pres_id = $('#pres_id').val();var description=$('#description').val();var valid;valid = validateContact();if (valid) {alert('invoice generated')&nbsp; &nbsp;};// check validationsfunction validateContact() {debugger;&nbsp; &nbsp; var valid = true;&nbsp; &nbsp; $(".demoInputBox").css('background-color', '');&nbsp; &nbsp; $(".info").html('');//list of test_id inputsvar testIdList =&nbsp;document.getElementsByClassName('test_id')for(let i= 0 ; i<testIdList.length; i++){&nbsp; &nbsp; if (!testIdList.item(i).value) {&nbsp; &nbsp; $("#test_id_info").html("(Required)");&nbsp; &nbsp; $("#test_id").css('background-color', '#FFFFDF');&nbsp; &nbsp; valid = false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; return valid;}});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form><table class="table table-hover table-white">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="col-sm-1">Test ID</th>&nbsp; &nbsp; &nbsp; &nbsp; <th class="col-md-6">Test Name</th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="width:100px;">Amount</th>&nbsp; &nbsp; &nbsp; &nbsp; <th> Action</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="rows">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td> <input class="form-control test_id" type="text" style="width:200px" id="test_id" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);"> </td>&nbsp; &nbsp; &nbsp; &nbsp; <td> <input&nbsp; type="text" style="width:300px" class="form-control test_name"&nbsp; readonly="" id="test_name"&nbsp; onblur="checkname();" onkeyup="checkname();" onchange="checkname();"></td>&nbsp; &nbsp; &nbsp; &nbsp; <td> <input&nbsp; type="text" style="min-width:100px" class="form-control amount" name="amount" readonly=""> </td>&nbsp; &nbsp; &nbsp; &nbsp; <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td>&nbsp;&nbsp; &nbsp; </tr>&nbsp; </tbody></table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span id="test_id_info" class="info text-danger"></span><div class="row">&nbsp; &nbsp;<div class="col-md-12">&nbsp; &nbsp; &nbsp; &nbsp;<div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Other Information</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea class="form-control" id="description"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="text-center m-t-20">&nbsp; <input type="button" class="btn btn-primary submit-btn" name="pay"value="Generate Invoice" id="pay"></div></form>

Answer 2

使用类、名称或其他属性而不是 id，因为您有多个具有相同 id 的元素——这总是会产生问题。如果您需要在提交之前检查类“text_id”的输入，请尝试更改验证功能function validateContact() {&nbsp; &nbsp; var valid = true;&nbsp; &nbsp; $(".demoInputBox").css('background-color', '');&nbsp; &nbsp; $(".info").html('');&nbsp; &nbsp; $('.text_id').map(function(i, el){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(!$(el).val() || $(el).val().trim() == '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valid = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#test_id_info").html("(Required)");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(el).css('background-color', '#FFFFDF');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp;&nbsp;&nbsp; &nbsp; return valid;}