如何使用JavaScript驗證動態生成的輸入框

Question

嗨，我有一個表單有一個Ajax函數，當用戶輸入代碼並從組合框中選擇一個值時，該函數會附加數據。由於附加的數據具有動態行，我想驗證這些輸入框，以便用戶只能輸入一個值，如01,02,03 .... 10，並且如果用戶試圖輸入一個大於10它應該顯示一個警告框。到目前爲止，我有這樣做的腳本，但由於名稱屬性不斷改變驗證似乎沒有工作。任何人都可以幫我嗎？

這裏是我的JavaScript代碼：

function getXMLHTTP() { //function to return the xml http object 
    var xmlhttp = false; 
    try { 
    xmlhttp = new XMLHttpRequest(); 
    } catch (e) { 
    try { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch (e) { 
     try { 
     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e1) { 
     xmlhttp = false; 
     } 
    } 
    } 
    return xmlhttp; 
} 

function getfunit2(makhcode, cmbmon) { 
    var strURL = "subjsele2.php?makhcode=" + document.nigran.makhcode.value + "&cmbmon=" + document.nigran.cmbmon.value; 
    var req = getXMLHTTP(); 
    if (req) { 
    req.onreadystatechange = function() { 
     if (req.readyState == 4) { 
     // only if "OK" 
     if (req.status == 200) { 
      document.getElementById('suboth').innerHTML = req.responseText; 
     } else { 
      alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
     } 
     } 
    } 
    req.open("POST", strURL, true); 
    req.send(null); 
    } 
} 

這是我的PHP代碼：

<?php 
$makhcode=$_GET["makhcode"]; 

$cmbmon=$_GET["cmbmon"]; 
$monno1 = "mon$cmbmon"; 


$con = mysql_connect('localhost', '****', '*****'); 
if (!$con) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("db", $con); 

$scomp = mysql_query("SELECT * FROM subject WHERE compulsory !='1' ORDER BY ordby")or die(mysql_error()); 
if(mysql_num_rows($scomp)>0){ 
echo "<table>"; 
    while($csub = mysql_fetch_assoc($scomp)){ 
     $msubjcode = $csub["code"]; 

     $csubqry = mysql_query("SELECT * FROM nigstat WHERE makhcode='".$makhcode."' AND subcode='".$msubjcode."'") or die(mysql_error()); 
     $fetchmon = mysql_fetch_array($csubqry) ; 
     $mmonval = $fetchmon["$monno1"]; 

    echo "<tr>"; 
    echo "<td width='200px'><font color='#FF0033'><strong>".$csub[name]."</strong></td><td><input id='s_id' name='s_$csub[code]' type='text' onkeypress=\"return chknum()\" size='1' maxlength='2' value='$mmonval'></td><input type='hidden' name='$mmonval' size='3' maxlength='3'>"; 
    echo "</tr>"; 

} 


echo "</table>"; 
} 

mysql_close($con); 
?> 

這裏是我的HTML代碼：

<table border ="0px" width="100%"> 

      <tr> 
       <td align="right" width="58px"><label class="" for="element_1"><font size="3px"><b>Code</b></font></label></td><td><input id="makhcode" name="makhcode" onkeyup="showyear('makhsele.php?makh='+this.value); getfunit(); getfunit2();" type="text" maxlength="6" size="6" value=""/></td><td><label class="description" align="right" for="element_1">Month</label></td><td><select id="cmbmon" name="cmbmon" class="" onchange="getfunit(); getfunit2();" style="font-size:14px;"> 
           <option value=""></option> 
           <option value="1">1</option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
           <option value="6">6</option> 
           <option value="7">7</option> 
           <option value="8">8</option> 
           <option value="9">9</option> 
           <option value="10">10</option> 
           <option value="11">11</option> 
           <option value="12">12</option> 

       </td> 
      </tr> 
    </table> 
    <p style="border-bottom: 1px dotted #ccc;"></p> 
    <div id="makhhint" style=""></div> 
    <p style="border-bottom: 1px dotted #ccc;"></p><br /> 

    <table border="0px" width="100%" cellspacing="0" cellpadding="0"> 

     <th><div class="form_description"><h2>Compulsory Subjects</h2></div></th>  
     <th><div class="form_description"><h2>Other Subjects</h2></div></th> 
     <tr> 
     <td style="vertical-align: top;"> 
    <div id="subcomp" align="left" align="top" style="background-color: #99FFFF;border: 1px solid black;padding:10px;"> 

    </div> 
     </td> 
     <td style="vertical-align: top;"> 
    <div id="suboth" align="left" align="top" style="background-color: #FFFFCC;border: 1px solid black;padding:10px;"> 

    </div> 

Answer 1

使用該功能來驗證碼

<input type="text" id="fname" onkeyup="validate_code(this)"> 

function validate_code(that) 
{ 

    if(isNaN(that.value)==true || that.value>10) 
    { 
     that.value=''; 
     alert('enter a valid value'); 
    } 
    return true 
    } 

鏈接到示例validation example