我有一张表格：
<form onsubmit="return validate(this);" accept-charset="UTF-8" action="/abc_forms" class="niceform" id="new_abc_form" method="post" name="form""><div style="margin:0;padding:0;display:inline">
<div class="specify_your_own" id='TextBoxesGroup'>
<label>Specify your own</label>
<input id="abc_form_git_repos_name" maxlength="32" name="abc_form[git_repos_name]" size="32" type="text" />
<select name="gitcategory[name]" id="git_category_name">
<option value="">Select Category</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<div id="TextBoxDiv">
</div>
<input type='button' value='Add More' id='addButton' style="margin-left: 200px; width: 70px;">
<input type='button' value='Remove' id='removeButton' style="width: 70px;">
</div>
<div class="specify_your_own">
<div style="margin-left:200px;" id="text"></div>
</div>
<br/>
<br/>
<div class="svn_field">
<label class="form_bold">SVN Repository:</label>
<div class="specify_your_own" id='TextBoxesGroupSecond'>
<label>Specify your own</label>
<input id="abc_form_svn_repos_name" maxlength="32" name="abc_form[svn_repos_name]" size="32" type="text" />
<select name="svncategory[name]" id="git_category_name">
<option value="">Select Category</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<div id="TextBoxDivSecond">
</div>
<input type='button' value='Add More' id='addButtonSecond' style="margin-left: 200px; width: 70px;">
<input type='button' value='Remove' id='removeButtonSecond' style="width: 70px;">
</div>
<div class="specify_your_own">
<div style="margin-left:200px;" id="text2"></div>
</div>
</fieldset>
<div class="instance_submit">
<input name="commit" type="submit" value="Submit" />
</div>
</form>
对于Add More按钮我有一个jquery函数，它使用select标签添加更多文本框，如下所示：
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#addButton").click(function () {
if(counter>6){
alert("Not allowed to add more then 7 repositories");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html("<label>Specify your own</label>"+"<input type='text' name='abc_form[git_repos_name_"+counter+"]' size='32' maxlength='32' value='' id='abc_form_git_repos_name_"+counter+"' >" + '<select id="git_category_name_'+counter+'" name="gitcategory[name_'+counter+']"><option value="">Select Category</option><option value="a">a</option><option value="b">b</option><option value="c">c</option><option value="d">d</option><option value="e">e</option><option value="f">f</option></select>' + '<br/>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
此功能添加更多按钮并从用户那里获取输入，并限制用户拥有超过6个输入。
现在终于，我有一个看起来像这样的javascript：
<script type="text/javascript">
var ck_git = /^(?!\d+$)[a-zA-Z0-9_,]*$/;
function validate(form){
var git1 = form.abc_form_git_repos_name_1.value;
var git2 = form.abc_form_git_repos_name_2.value;
var git3 = form.abc_form_git_repos_name_3.value;
var git4 = form.abc_form_git_repos_name_4.value;
var git5 = form.abc_form_git_repos_name_5.value;
var git6 = form.abc_form_git_repos_name_6.value;
var svn1 = form.abc_form_svn_repos_name_1.value;
var svn2 = form.abc_form_svn_repos_name_2.value;
var svn3 = form.abc_form_svn_repos_name_3.value;
var svn4 = form.abc_form_svn_repos_name_4.value;
var svn5 = form.abc_form_svn_repos_name_5.value;
var svn6 = form.abc_form_svn_repos_name_6.value;
var errors = [];
if (!ck_git.test(git1)) {
errors[errors.length] = "Git add more No.1 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(git2)) {
errors[errors.length] = "Git add more No.2 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(git3)) {
errors[errors.length] = "Git add more No.3 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(git4)) {
errors[errors.length] = "Git add more No.4 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(git5)) {
errors[errors.length] = "Git add more No.5 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(git6)) {
errors[errors.length] = "Git add more No.6 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(svn1)) {
errors[errors.length] = "Svn add more No.1 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(svn2)) {
errors[errors.length] = "Svn add more No.2 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(svn3)) {
errors[errors.length] = "Svn add more No.3 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(svn4)) {
errors[errors.length] = "Svn add more No.4 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(svn5)) {
errors[errors.length] = "Svn add more No.5 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (!ck_git.test(svn6)) {
errors[errors.length] = "Svn add more No.6 Not Valid - Only letters (A-Z or a-z) and Numbers are allowed. Special characters and space not allowed";
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
function reportErrors(errors){
var msg = "Please Enter Valide Data:\n";
for (var i = 0; i<errors.length; i++) {
var numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}
</script>
此JavaScript函数验证reqular表达式，并在验证失败时返回错误总和。
问题：只有在用户点击后添加了6次以上才会生成所有正在查找的ID。如果用户单击添加一次并且验证失败，则仍会提交表单。我是一名ROR开发人员，不知道如何解决这个问题。
任何帮助都将非常感激。
答案 0 :(得分：1)
如果他们没有添加所有元素，那么这样的行：
var git3 = form.abc_form_git_repos_name_3.value;
将失败，因为form.abc_form_git_repos_name_3将是undefined。尝试访问value的{{1}}属性会引发JavaScript错误，您的验证将无法完成（在这种情况下，浏览器将继续提交表单）。
您需要做的是在尝试访问其属性之前确保这些元素存在：
undefined将if(form.abc_form_git_repos_name_3)
var git3 = form.abc_form_git_repos_name_3.value;
传递给undefined函数将返回test，因此您还需要在调用正则表达式之前检查false等是否已设置：< / p>
git3答案 1 :(得分：1)
您可以在动态添加的输入字段中添加一些特定的类，例如“ some_class ”，并且由于您使用的是jQuery，因此您可以使用jQuery.each()，例如：
var ck_git = /^(?!\d+$)[a-zA-Z0-9_,]*$/;
function validate(form){
var errors = [];
$("input.some_class").each(function(idx, value) {
if( !ck_git.test(value) ) {
errors[] = "Git add more No." + idx + ".....";
}
});
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
)