JQuery驗證在第一個窗體中僅觸發了3個

Question

我在使用JQuery驗證插件進行JQuery驗證時遇到了一些問題。 事情工作正常，直到我改變了我的佈局，並在窗體上添加了引導切換元素。在我的視圖中有多種形式，它們被放到一個父div中，每個表單都有一個標題，點擊後我可以切換表單。

所以就是這樣。

CreateFormDiv 
    MainFormToCreateAReacord 

Parent div - accordion 
    form-div1 - parent accordion 
    form1 
    form-div2 - parent accordion 
    form2 

現在，當我點擊form-div1我得到的form1，我能夠成功地更新記錄。當我點擊form-div2時，我得到了form2和form1皮革，我現在可以更新form2。

所有這些工作正常，但問題出現時，我打開了MainFormToCreateAReacord（意思是不隱藏）。雖然多數民衆贊成打開，當我嘗試提交form1，它驗證MainFormToCreateAReacord我提交form1，它應該驗證form1而不是MainFormToCreateAReacord

我附上截圖只是爲了說清楚這是不對的。

這裏是的jsfiddle example

在撥弄例子，似乎驗證工作於項目沒有74但不能在75 & 76.

在相同的任何指針將高度讚賞。

感謝

Answer 1

檢查WORKING FIDDLE

jQuery驗證驗證綁定到只有1表格的時間，因此，如果u使用只有1級進行驗證，然後驗證適用於僅1表:)

只需給每個窗體添加不同的類，然後爲每個窗體添加validate（）。 :)

//的Html

<div class="all-keys"> 
    <section class="innerContent"> 
    <h3> 
     SSH Keys 
     <a class="btn btn-info sshNew" data-toggle="collapse" href="#ssh_form"> 
     Add SSH Key 
     </a> 
    </h3> 
    <div class="whiteContainer panel-collapse collapse in" id="ssh_form" style=""> 
     <div class="panel-body"> 
     <form accept-charset="UTF-8" action="/ssh_keys" class="new_ssh_key1" data-remote="true" id="sshForm" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div> <div class="form-group"> 
      <textarea class="form-control" cols="2" id="ssh_key_key" name="ssh_key[key]" placeholder="Public SSH Key" required="required" rows="2"></textarea> 
      <input id="ssh_key_id" name="ssh_key[id]" type="hidden"> 
      </div> 
      <div class="form-group"> 
      <button class="btn btn-primary" name="button" type="submit">Create SSH Key</button> 
      </div> 
     </form> 
     </div> 
    </div> 
    <div class="panel-group margin-top10" id="accordionSSH"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <div class="pull-right text-right"> 
       <a class="fa fa-edit sshEdit" data-parent="#accordionSSH" data-toggle="collapse" href="#sshKey74Edit"></a> 
       <a class="fa fa-close" data-confirm="Are you sure?" data-method="delete" href="/ssh_keys/74" rel="nofollow"></a> 
      </div> 
      <a class="sshEdit" data-parent="#accordionSSH" data-toggle="collapse" href="#sshKey74"> 
       74 
      </a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="sshKey74"> 
      <div class="panel-body"> 
      <div class="form-group"> 
       <input class="form-control" disabled="" placeholder="Name of key" type="text" value="74"> 
      </div> 
      <div class="form-group"> 
       <textarea class="form-control" cols="2" disabled="" rows="2">Some key</textarea> 
      </div> 
      </div> 
     </div> 
     <div class="panel-collapse collapse" id="sshKey74Edit"> 
      <div class="panel-body"> 
      <form accept-charset="UTF-8" action="/ssh_keys/74" class="edit_ssh_key1" data-remote="true" id="sshForm" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div> <div class="form-group"> 
       <textarea class="form-control" cols="2" id="ssh_key_key" name="ssh_key[key]" placeholder="Public SSH Key" required="required" rows="2"></textarea> 
       <input id="ssh_key_id" name="ssh_key[id]" type="hidden" value="74"> 
       </div> 
       <div class="form-group"> 
       <button class="btn btn-primary" name="button" type="submit">Update SSH Key</button> 
       </div> 
      </form> 
      </div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <div class="pull-right text-right"> 
       <a class="fa fa-edit sshEdit" data-parent="#accordionSSH" data-toggle="collapse" href="#sshKey75Edit"></a> 
       <a class="fa fa-close" data-confirm="Are you sure?" data-method="delete" href="/ssh_keys/75" rel="nofollow"></a> 
      </div> 
      <a class="sshEdit" data-parent="#accordionSSH" data-toggle="collapse" href="#sshKey75"> 
       75 
      </a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="sshKey75"> 
      <div class="panel-body"> 
      <div class="form-group"> 
       <input class="form-control" disabled="" placeholder="Name of key" type="text" value="75"> 
      </div> 
      <div class="form-group"> 
       <textarea class="form-control" cols="2" disabled="" rows="2">some key </textarea> 
      </div> 
      </div> 
     </div> 
     <div class="panel-collapse collapse" id="sshKey75Edit"> 
      <div class="panel-body"> 
      <form accept-charset="UTF-8" action="/ssh_keys/75" class="edit_ssh_key2" data-remote="true" id="sshForm" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div> <div class="form-group"> 
       <textarea class="form-control" cols="2" id="ssh_key_key" name="ssh_key[key]" placeholder="Public SSH Key" required="required" rows="2"></textarea> 
       <input id="ssh_key_id" name="ssh_key[id]" type="hidden" value="75"> 
       </div> 
       <div class="form-group"> 
       <button class="btn btn-primary" name="button" type="submit">Update SSH Key</button> 
       </div> 
      </form> 
      </div> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <div class="pull-right text-right"> 
       <a class="fa fa-edit sshEdit" data-parent="#accordionSSH" data-toggle="collapse" href="#sshKey84Edit"></a> 
       <a class="fa fa-close" data-confirm="Are you sure?" data-method="delete" href="/ssh_keys/84" rel="nofollow"></a> 
      </div> 
      <a class="sshEdit" data-parent="#accordionSSH" data-toggle="collapse" href="#sshKey84"> 
       84 
      </a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" id="sshKey84"> 
      <div class="panel-body"> 
      <div class="form-group"> 
       <input class="form-control" disabled="" placeholder="Name of key" type="text" value="84"> 
      </div> 
      <div class="form-group"> 
       <textarea class="form-control" cols="2" disabled="" rows="2">Some key</textarea> 
      </div> 
      </div> 
     </div> 
     <div class="panel-collapse collapse" id="sshKey84Edit"> 
      <div class="panel-body"> 
      <form accept-charset="UTF-8" action="/ssh_keys/84" class="edit_ssh_key3" data-remote="true" id="sshForm" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div> <div class="form-group"> 
       <textarea class="form-control" cols="2" id="ssh_key_key" name="ssh_key[key]" placeholder="Public SSH Key" required="required" rows="2"></textarea> 
       <input id="ssh_key_id" name="ssh_key[id]" type="hidden" value="84"> 
       </div> 
       <div class="form-group"> 
       <button class="btn btn-primary" name="button" type="submit">Update SSH Key</button> 
       </div> 
      </form> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 
</div> 

// jQuery的一部分

$(".new_ssh_key1").validate(); 
$(".edit_ssh_key1").validate(); 
$(".edit_ssh_key2").validate(); 
$(".edit_ssh_key3").validate(); 

$(".sshEdit").click(function(){ 
if(!$(".sshNew").hasClass("collapsed")) 
     $(".sshNew").trigger("click"); 
});