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"); 
});