验证下拉框数组

有人可以帮助我，请看看我哪里出错了?

<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>

我已经创建了一个汽车数组，所以如果personA有更多的汽车，他们可以单击add并选择另一个。如果他们有1辆车，只是输入名称和1辆车，表单工作，但当我点击添加行，选择另一辆车，它不工作?

谢谢

您的问题是，当有一个选择元素名为"car[]"时，document.forms["myForm"]["car[]"]是一个元素，但当有多个选择元素名为"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 */ }

此解决方案假设只有第一个必须有效(考虑到缺乏"remove car"按钮，这似乎是最合理的;如果这不是您的意图，则迭代它们并在任何不符合有效性条件的情况下返回false。

不能有多个具有相同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]，以使验证完成。

相关内容

最新更新

热门标签：