在 jQuery 中验证动态创建的文本输入答案

【问题标题】：Validate dynamically created text inputs in jQuery在 jQuery 中验证动态创建的文本输入
【发布时间】：2014-10-13 16:36:14
【问题描述】：

我目前拥有的是此代码，它显示特定目录下的所有发票。在更改目录下拉列表时，应根据所选下拉值填充表。该表显示与所选目录有关的发票，每个记录集有 3 个文本框。 我需要验证这些文本框。假设一个特定目录有 3 个发票/记录，那么应该有 9 个文本框。

查看页面包含：-

<script type="text/javascript">
   $(document).ready(function(){
       $('#catalogue').change(function(){
          $.post('../controller/valuation.php', {catalogue:valuation_form.catalogue.value},
          function(result){
                    $('#valuationResult').html(result).show();
          })
       });
   });
</script>

<form action="" id="valuation_form" name="valuation_form"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="16%">Catalogue Code</td>
            <td width="15%">
                <select name="catalogue" id="catalogue" style="width:75px;">
                    <option></option>
                    <?php 
                        require_once '../model/catalogue.php';
                        @$result=Catalogue::getAllCatalogues();
                        while($value=mysql_fetch_assoc($result)){
                    ?>
                    <option value="<?php echo $value['catalogue_id']; ?>">
                           <?php echo $value['catalogue_code'] ?>
                    </option>
                    <?php } ?>
                </select>
            </td>
         </tr>
    </table>  
</form>

<div class="atable">
       <form action="../controller/valuation.php" method="POST" enctype="multipart/form-data">
            <div id="valuationResult"></div>      
       </form>
</div>

控制器页面包含：-

function getValuationDetails(){

  require_once '../model/sales.php';
  $catalogue=$_POST['catalogue'];
  $obj=new Sales();
  $result=$obj->getValuationEntryLotsForCatalogue($catalogue);
  @$num=mysql_num_rows(@$result);
  if($num>0){

    $table='<table id="tabled" class="tftable" border="1">
              <thead>
                <tr>
                     <th style="display:none" width="0%">INVOICE ID</th>
                     <th width="6%">LOT #</th>
                     <th width="15%">SELLING MARK</th>
                     <th width="9%">INVOICE #</th>
                     <th width="8%">PACKAGES</th>
                     <th width="8%">GRADE</th>
                     <th width="13%">NET WEIGHT(Kg)</th>
                     <th style="text-align:center">DESCRIPTION</th>
                     <th width="11%" style="text-align:center;">VALUATION&nbsp;</th>
                </tr>
              </thead>';
    while($value=mysql_fetch_assoc($result)){
        $table.='<tr>
                   <td style="display:none">
                         <input type="text" id="invoice" name="invoice[]" value="'.$value['invoice_id'].'"/>
                   </td>
                   <td>'.$value['lot_no'].'</td>
                   <td>'.$value['selling_mark'].'</td>
                   <td>'.$value['ref_invoice_no'].'</td>
                   <td>'.$value['no_of_packages'].'</td>    
                   <td>'.$value['grade_desc'].'</td>        
                   <td style="text-align:right;">'.$value['total_net_qty'].'&nbsp;&nbsp;</td>            
                   <td>
                         <textarea style="width:270px;max-width:270px;" class="description" name="description[]"></textarea>
                   </td>
                   <td>
                         <input type="text" class="value1" name="value1[]" size="2">
                         <input type="text" class="value2" name="value2[]" size="2">
                   </td>
                 </tr>';
    }
    $table.='<tr><td colspan="9" style="text-align:right">
                    <input type="hidden" name="action" value="valuation_entry"/>
                    <input type="submit" name="save" id="save" value="Save"/>
                    <input type="reset" value="Clear"/>
             </td></tr>';
    echo $table;
  }
  else{
    echo "";
  }

}

三个文本框/文本区域如下：- 1. 描述 - 只允许字母的文本区域。 2. Value1- 只允许数字的文本框。 3. Value1- 只允许数字的文本框。 *三个不能全为空。

我已经尝试了各种选项来尝试这个，但不幸的是我无法弄清楚我错过了什么和在哪里。

非常感谢任何帮助！！！

【问题讨论】：

是您不知道如何验证的问题吗？我有点困惑。
如果您不使用 jQuery Validate 插件，请不要使用 jquery-validate 标签。已编辑。
如果您需要有关 JavaScript 的帮助，请向我们展示在浏览器中看到的相关 RENDERED HTML 标记。

标签： php jquery html validation

【解决方案1】：

使用“必填”类标记不能为空的字段。

然后在 Jquery 上你应该遍历这些元素：

   var error = false;
   $('.required').each(function(i){
        if(!$(this).val()){
            $(this).css('border', '2px solid red'); 
            error = true;
        }else{
            $(this).css('border','1px solid #BBBBBB');
        }
    }); 
    if(error) {
       alert('All red fields are required!!!!!');
    }

【讨论】：