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


Validate dynamically created text inputs in jQuery

我目前拥有的是这段代码,它显示特定目录下的所有发票。更改目录下拉列表时,应根据选定的下拉值填充表格。该表显示与所选目录相关的发票,每个记录集有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.值1-只允许数字的文本框。3.值1-只允许数字的文本框。*3不能全部为空。

我尝试了各种各样的选择,但不幸的是,我不知道我错过了什么和哪里。

非常感谢您的帮助!!!

使用类"required"标记不能为空的字段。

然后在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!!!!!');
    }