jQuery에서 동적으로 작성된 텍스트 입력 유효성 확인

Question

현재 보유하고있는 것은 특정 카탈로그에있는 모든 송장을 표시하는 코드입니다. 카탈로그 드롭 다운이 변경되면 선택한 드롭 다운 값을 기준으로 표가 채워 져야합니다. 이 테이블에는 각 카탈로그에 대해 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은 비워 둘 수 없습니다.

나는 이것을 시도하기 위해 모든 종류의 옵션을 시도했지만, 불행히도 무엇을 어디에서 놓치고 있는지 알 수 없다.

도움이 정말 대단합니다!

Answer 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!!!!!'); 
    }