JQuery 验证仅在 3 个表单中触发第 1 个表单

Question

我在使用 Jquery validate 插件进行 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

检查工作FIDDLE

jQuery validate 一次将验证绑定到仅 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");
});