Question

我创建了一个带有动态创建字段的表单，我试图找到一种方法来使用javascript验证所有字段。我只想提醒用户字段为空。这是我的代码：

<script>
var counter = 0;
function addInput(divName){
counter++; 
var Ai8ousa = document.createElement('div'); 
 Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";   
document.getElementById(divName).appendChild(Ai8ousa);

}

function validations(form){
var field;
var i=0;
do{
     field=form['field[]'];
       if (field.value=='')
          {
            alert('The field is null!!!');
            return false;
          }
        i++;
}while(i<counter);
}
</script>


<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" />  <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />

</form>

我期待那会起作用，但我显然是错的:( 使用此代码，如果我没有按下“新字段”按钮并按提交，我将按预期获得警报。但在所有其他情况下，我没有得到任何东西！不管怎样，谢谢你的时间，如果我犯了语法错误，对不起！

Answer 1

<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++; 
var Ai8ousa = document.createElement('div'); 
 Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";   
document.getElementById(divName).appendChild(Ai8ousa);

}

function validations(form){
var field;
var i=0;
do{
     field=form[i];
       if (field.value=='')
          {
            alert('The field is null!!!');
            return false;
          }
        i++;
}while(i<counter);
}
</script>


<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" />  <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />

</form>

我不明白这一行：field=form['field[]'];，所以我将其更改为field=form[i];

http://jsfiddle.net/sZ4sd/

Javascript动态创建表单字段验证

1 个答案: