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 関数があります。

<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 を生成した場合にのみ正常に機能します。ユーザーが [追加] を 1 回クリックして検証に失敗した場合でも、フォームは送信されます。私は 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とが返されるため、正規表現を呼び出す前に、などが設定されていることも確認する必要があります。testfalsegit3

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 に答える