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

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++; 

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"  type="text" style="width:300px" class="form-control test_name"  readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';

html += '<td id="amounts">  <input id="amount" name="amount" type="text" style="min-width:150px" class="form-control amount"  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 +=  '</tr>';

$('#rows').append(html);

  

});

$(document).on('click','.remove',function() {

$(this).closest("#trrows").remove();

});

});

//  generate bill 

$(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() {

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

   

};

// check validations

function validateContact() {

debugger;

    var valid = true;

    $(".demoInputBox").css('background-color', '');

    $(".info").html('');

//list of test_id inputs

var testIdList = 

document.getElementsByClassName('test_id')

for(let i= 0 ; i<testIdList.length; i++){

    if (!testIdList.item(i).value) {

    $("#test_id_info").html("(Required)");

    $("#test_id").css('background-color', '#FFFFDF');

    valid = false;

        }

        }

  

    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">

  <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>

Answer 2

使用类、名称或其他属性而不是 id，因为您有多个具有相同 id 的元素——这总是会产生问题。如果您需要在提交之前检查类“text_id”的输入，请尝试更改验证功能

function validateContact() {

    var valid = true;

    $(".demoInputBox").css('background-color', '');

    $(".info").html('');

    $('.text_id').map(function(i, el){        

        if(!$(el).val() || $(el).val().trim() == '') {

            valid = false;

            $("#test_id_info").html("(Required)");

            $(el).css('background-color', '#FFFFDF');

        }

    });

  

    return valid;

}