如何使用jQuery为空字段发出警报？

Question

当用户尝试添加新行（通过单击“添加按钮”）而不填充当前行时，我试图在我的表中放置一个警报。用户不应该能够添加该行，除非他填充了所有最后一行中的列。为了添加新行，我正在克隆行。任何帮助将不胜感激。

 var regex = /^([a-zA-Z0-9 _-]+)$/; var cindex = 0; $(document).on('click','.Buttons', function() { if($(this).closest("tr")==''){ alert("Please fill the current row"); return false; } var $tr = $('#dataTable tbody tr:last'); var $clone = $tr.clone(true); cindex++; $clone.find(':input').not('select').val('').attr('disabled', true); $clone.attr('id', 'id'+(cindex) ); //update row id if required //update ids of elements in row $clone.find("*").each(function() { var id = this.id || ""; if(id != ""){ var match = id.match(regex) || []; if (match.length == 2) { this.id = match[1] + (cindex); } } }); $tr.after($clone); }); function disableField(){ if(document.frmmain.fldsearch){ $("input").prop('disabled', false); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable"> <thead> <tr> <td class="headingalign" width="16%">Links</td> <td class="headingalign" width="32%">Desciption</td> <td class="headingalign" width="16%">Image</td> <td class="headingalign" width="16%">URL</td> <td class="headingalign" width="16%"></td> </tr> </thead> <tbody> <tr id="id01" name="row"> <td> <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" > <option value="">Select</option> <option value="GDS">Guides</option> <option value="LOF">Latest Offers</option> <option value="TEM">Templates</option> <option value="VID">Videos</option> </select> </td> <td> <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" /> </td> <td> <input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /> </td> <td> <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /> </td> <td> <input tabindex="6" id="Button4" value="Delete Row" disabled="true" class="DeleteButton" name="Button4" type="button" /> </td> </tr> </tbody> </table> <div class="buttonarea"> <ul> <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li> </ul> </div>

Answer 1

您可以计算值为空的最后一个tr的输入：

var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('select:last').val()){
  alert("Please fill the current row");
  return false;
}

演示：

 var regex = /^([a-zA-Z0-9 _-]+)$/; var cindex = 0; $(document).on('click','.Buttons', function(e) { var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length; if(count || !$('select:last').val()){ alert("Please fill the current row"); return false; } var $tr = $('#dataTable tbody tr:last'); var $clone = $tr.clone(true); cindex++; $clone.find(':input').not('select').val('').attr('disabled', true); $clone.attr('id', 'id'+(cindex) ); //update row id if required //update ids of elements in row $clone.find("*").each(function() { var id = this.id || ""; if(id != ""){ var match = id.match(regex) || []; if (match.length == 2) { this.id = match[1] + (cindex); } } }); $tr.after($clone); }); function disableField(){}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable"> <thead> <tr> <td class="headingalign" width="16%">Links</td> <td class="headingalign" width="32%">Desciption</td> <td class="headingalign" width="16%">Image</td> <td class="headingalign" width="16%">URL</td> <td class="headingalign" width="16%"></td> </tr> </thead> <tbody> <tr id="id01" name="row"> <td> <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" > <option value="">Select</option> <option value="GDS">Guides</option> <option value="LOF">Latest Offers</option> <option value="TEM">Templates</option> <option value="VID">Videos</option> </select> </td> <td> <input id="flddesc" name="flddesc" maxlength="500" class="objinputtext" value="" /> </td> <td> <input id="fldimg" name="fldimg" maxlength="50" class="objinputtext" value="" /> </td> <td> <input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" value="" /> </td> <td> <input tabindex="6" id="Button4" value="Delete Row" class="DeleteButton" name="Button4" type="button" /> </td> </tr> </tbody> </table> <div class="buttonarea"> <ul> <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li> </ul> </div>

Answer 2

您可以通过遍历 closet 的结果来检查每个元素是否为空。

只需添加以下代码：

$(this).closest('tr').find("*").each(function() 
{
   if(this.value==")
   {
     alert("Required details missing");
     return false;
   }
});

而不是这个：

if($(this).closest("tr")==''){
alert("Please fill the current row");
return false;
}