1

我有一个表格：

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

对于添加更多按钮，我有一个 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 函数验证正则表达式并在验证失败时返回错误总和。

问题：只有当用户点击添加更多 6 次生成它正在寻找的所有 id 时，这才有效。如果用户单击添加更多一次并且验证失败，则仍会提交表单。我是 ROR 开发人员，不知道如何解决此问题。

任何帮助将不胜感激。

4

2 回答 2

1

如果他们没有添加所有元素，则如下所示：

var git3 = form.abc_form_git_repos_name_3.value;

会失败，因为form.abc_form_git_repos_name_3会undefined。尝试访问 的value属性undefined会引发 JavaScript 错误，并且您的验证不会完成（在这种情况下浏览器将继续提交表单）。

您需要做的是在尝试访问它们的属性之前确保这些元素存在：

if(form.abc_form_git_repos_name_3)
    var git3 = form.abc_form_git_repos_name_3.value;

传递undefined给test函数将返回false，因此您还需要git3在调用正则表达式之前检查是否设置了 , 等：

if(git3 && !ck_git.test(git3)) {
    ...
}
于 2013-03-11T11:48:10.090 回答
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;
)
于 2013-03-11T11:52:05.633 回答