如何使用javascript驗證動態生成的文本字段

-2

我添加了使用php動態生成的動態名稱動態生成的5個文本字段。我可以使用javascript驗證這些字段。這裏是小示例代碼，但我的實際代碼是不同的，如果你幫助我使用以下代碼進行驗證，我可以在那裏做到這一點。幫我....如何使用javascript驗證動態生成的文本字段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
function validate() 
{ 
//help me to write validation code here. 
} 
</script> 
</head> 
<body> 
<form method="post" action="##" name="test" onsubmit="return validate()"> 
<?php 
$i=0; 
while($i<5) 
{ 
echo "<input type='text' name='count$i'>" 
$i++; 
} 
echo "<input type='submit' value='ok'>"; 
?> 
</form> 
</body> 
</html>

來源

2013-10-22 Saravanan

您嘗試過什麼嗎？ –

只需驗證所有輸入，或向要驗證的所有輸入添加一個類並驗證它們。 – Timmetje

你會支持哪些瀏覽器？你是否有意避免使用jquery？ –

將類添加到元素。添加類元素的目的是捕捉只有你動態地添加這些元素，並希望驗證

while($i<5) 
{ 
    echo "<input class='validate-it' type='text' name='count$i'>" 
    $i++; 
}

在JS

<script> 
function validate() 
{ 
    var elems = document.getElementsByClassName('validate-it'); 
    for(var i=0; i<elems.length; i++) { 
     // Validate here 
     // Code here depends on the type of validation you wants 
    } 
} 
</script>

如果你的描述類型的驗證，我必將編輯答案你想要表演。希望這會有所幫助......

來源

2013-10-22 14:29:31

恕我直言，類更適合爲CSS格式標記元素，而不是爲頁面中的元素提供功能性目標。

我建議給表單分配一個ID，這樣你就可以用JavaScript來引用它，並用getElementById函數挑選它，然後遍歷它的元素併爲它們中的每一個執行你的驗證函數，比如validateField（）。事情大致是這樣的

function validateField(fieldToValidate) { 
    //Here you can perform your validation against fieldToValidate.value (for text inputs) 
} 


var frm = document.getElementById("myForm"); 
for (var i=0; frm.elements[i]; i++) 
{//Cycle through all input tags, of text type, inside the form 
    if (
     frm.elements[i].tagName=="INPUT" 
     && 
     frm.elements[i].getAttribute("type")=="text") 
     ) 
    { 
     validateField(frm.elements[i]); 
    } 
}

而且，如果你知道動態生成的元素的名字在你的榜樣遵循特定的命名約定，如（countX X爲數字），要驗證只有動態 - 生成的輸入字段，如果它們是文本輸入字段，則只能檢查thoose;更好的辦法是將特定的ID而不是名稱分配給字段，以確保你沒有使用相同的名稱並驗證你不應該的東西。

PHP側

<form method="post" action="##" id="myForm" name="test" onsubmit="return validate()"> 
<?php 
$i=0; 
while($i<5) 
{ 
echo "<input type='text' id='txtField$i'>" 
$i++; 
} 
?>

JS側

function validateField(fieldToValidate) { 
    //Here you can perform your validation against fieldToValidate.value (for text inputs) 
} 


var frm = document.getElementById("myForm"); 
var currentField; 
for (var i=0; currentField = document.getElementById("txtField"+i); i++) 
{//Cycle through all txtField* starting IDs elements 
    validateField(currentField); 
}

來源

2013-10-22 14:47:17 Nillus

你沒有名字（範圍是多少？字符串特殊內容？等數）的詳細類型的驗證，所以這是一個常見的驗證骨架的方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <script type="text/javascript"> 
     function validate() 
     { 
      var allInputsOk = true; 
      var inputs = document.getElementsByTagName("input"); 
      for (var inpx in inputs) { 
       if (inpx.substring(0, 5) == "count") { 
        // it's one of the inputs named "count..." 
        var inpIdx = inpx.substr(5); 
        var inpObj = document.getElementsByName(inpx)[0]; 
        var inpVal = inpObj.value; 
        allInputsOk &= validateSingleInput(inpIdx, inpVal); 
        if(!allInputsOk) break; 
       } 
      } 
      return allInputsOk; 
     } 
     /* 
     * Tests the value of the input named "countX" 
     * @return true if "value" is valid for input "count<index>", false else 
     */ 
     function validateSingleInput(index, value) { 
      var inputValueNumber = Number(value); // in case to test for numeric inputs 
      var inputValueString = String(value); // in case to test for string inputs 
      // your validation test here ... return true or false 
      return true; // dummy 
     } 
    </script> 
</head> 
<body> 
    <form method="post" action="#" name="test" onsubmit="return validate()"> 
     <?php 
     $i=0; 
     while($i<5) 
     { 
     echo "<input type='text' name='count$i'>"; 
     $i++; 
     } 
     echo "<input type='submit' value='ok'>"; 
     ?> 
    </form> 
</body> 
</html>

來源

2013-10-22 15:19:31

如何使用javascript驗證動態生成的文本字段

回答

相關問題