驗證一組下拉框？

有人可以幫助我，看看我要去哪裏錯了嗎？驗證一組下拉框？

<script type="text/javascript"> 
function validateForm(){ 
var x=document.forms["myForm"]["fname"].value; 
if (x==null || x=="") 
    { 
    alert("Enter Name"); 
    return false; 
    } 
var x=document.forms["myForm"]["car[]"].value; 
if (x==null || x=="") 
    { 
    alert("Select Car"); 
    return false; 
    } 
} 
    function add(tbl1) { 
    var tb = document.getElementById(tbl1); 
    var rowCount = tb.rows.length; 
    var row = tb.insertRow(rowCount); 
    var colCount = tb.rows[1].cells.length; 
    for(var i=0; i<colCount; i++) { 
     var newCell = row.insertCell(i); 
     newCell.innerHTML = tb.rows[1].cells[i].innerHTML; 
    } 
    } 

</script> 
</head> 
<body> 
<form name="myForm" action="post.php" onsubmit="return validateForm()" method="post"> 
First name: <input type="text" name="fname"> 
<br><br> 
<p>2. Your previous cars</p> 
<table id="cars" border="1"> 

<tr><td width = "150"><center>Car</center></td> 

</tr><tr> 

</td><td><select name="car[]"> 
<option value="" selected=「selected」>Select one please</option> 
<option value=Ford> Ford </option> 
<option value=Audi> Audi </option> 
<option value=Volvo> Volvo </option> 
<option value=Nissan> Nissan </option> 
<option value=Car 5>Car 5 </option> 
</select></td> 

</tr></table><br><br> 
<input type="button" value="Add Row" onclick="add('cars')"/> 
<input type="submit" value="Submit"> 
</form>

我已經創建了汽車的數組所以如果人物角色有更多的汽車，他們可以點擊添加，並選擇另外一個。如果他們有1輛車，只需輸入名稱和1輛車，表格可以工作，但是當我點擊添加行並選擇另一輛車時，它不起作用？

感謝

來源

2011-11-24 Tony

問題是，當存在一個名爲「car []」的select元素時，它是一個元素，但是當multipel選擇元素名爲「car []」時，它是一個數組（元素）。您的驗證假定它始終是一個元素，因此它失敗。

您可以測試document.forms["myForm"]["car[]"]是否是一個數組，您可能會覺得很尷尬，或者您可以使用document.getElementsByName("car[]")，它會始終返回一組元素供您迭代。

如果數組爲空或者第一個元素不符合您的有效性條件，則以下if將評估爲true。

var x = document.getElementsByName("car[]"); 
if (x.length == 0 || x[0].value == null || x[0].value == "") { /* do stuff */ }

此解決方案假定只有第一個必須是有效的（由於缺乏「刪除車」按鈕，這似乎是最合理的，如果這不是你的本意，在它們之間迭代並返回false如果任何不滿足有效性條件

來源

2011-11-24 20:06:12 Matt

你不能有相同的屬性name多個輸入字段。如果按下Add Row按鈕，則組合框將被複制，但它保持相同的名稱，因此document.forms["myForm"]["car[]"].value;變得未定義。解決這個問題

一種方法是：

讓<select name="car[]">到<select name="car[1]">而JavaScript的內環更改爲以下：

newCell.innerHTML 
    = tb.rows[1].cells[i].innerHTML.replace("car[1]", "car["+rowCount+"]");

但是你現在需要遍歷每個car[x]，爲了完成驗證。

來源

2011-11-24 19:44:42 Chris

我想糾正這個問題：具有相同'name'的多個輸入字段是有效的（確實是單選按鈕必需的），它是'id'必須是唯一的。 – Matt

驗證一組下拉框？

回答

相關問題