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

时间:2014-10-13 16:36:14

标签: php jquery html validation

我现在拥有的是此代码,它显示特定目录下的所有发票。在更改目录下拉列表时,应根据所选的下拉列值填充该表。该表显示与所选目录有关的发票,每个记录集有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 "";
  }

}

三个文本框/ textareas如下: -  1.描述 - 仅允许字母的textarea。  2. Value1-仅允许数字的文本框。  3. Value1-仅允许数字的文本框。 *所有3个都不能为空。

我尝试了各种各样的选择来试试这个,但不幸的是我无法弄清楚我失踪的地方和地点。

非常感谢任何帮助!!!

1 个答案:

答案 0 :(得分:0)

使用课程&#34;必需&#34;标记不能为空的字段。

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