第二个 jQuery Validate 在 Bootstrap 选项卡中不起作用

Question

我的主页上有两个标签，一个用于个人注册，另一个用于公司。验证在第一个选项卡中工作正常，但在第二个选项卡中，验证不起作用并且不返回任何内容。

首先，HTML：

<!-- Fire nav tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#pf" data-toggle="tab">Pessoa Fisica</a></li>
    <li><a href="#pj" id="pjHandler" data-toggle="tab">Pessoa Juridica</a></li>
</ul>

<!-- Nav tabs -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="pf">
        <form id="pfRegister" action="" method="post" autocomplete="off">
            <div class="form-group">
                <input type="text" id="firstName" class="form-control inputSk" placeholder="Name" name="firstName" required>
            </div>
            <div class="form-group">
                <input type="text" id="lastName" class="form-control inputSk" placeholder="Surname" name="lastName" required>
            </div>
            <div class="form-group">
                <input type="text" id="email" class="form-control inputSk" placeholder="Email" name="email" required>
            </div>
            <div class="form-group">
                <input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" required>
            </div>
            <div class="form-group">
                <input type="password" id="confirm_password" class="form-control inputSk" placeholder="Confirm your password" name="confirm_password" required>
            </div>
            <div class="form-group">
                 <select id="gender" name="gender" class="form-control inputSk" required>
                     <option value="">Gender</option>
                     <option value="Male">Male</option>
                     <option value="Female">Female</option>
                 </select>
            </div>
            <div class="form-group">
                <div class='input-group date'>
                    <input type='text' class="form-control inputSk input" name="birth" id="birth" required>
                 </div>
            </div>

        </div>
        <div class="actionForm">
            <button type="submit" id="send" class="btn btn-default sk skBtn-primary submit">Sign up</button>
        </div>
    </form>
    </div>

<!-- company register -->
<div class="tab-pane fade" id="pj">
        <form id="pjRegister" class="captcha" action="" method="post" autocomplete="off">
            <div class="form-group">
                 <input type="text" class="form-control inputSk" name="cnpj" id="cnpj" placeholder="CNPJ" required>
             </div>
             <div class="form-group">
                 <input type="text" class="form-control inputSk" name="juridicIdentity" id="razaosocial" placeholder="Razao Social" required>
             </div>
             <div class="form-group">
                 <input type="text" class="form-control inputSk" name="companyIdentity" id="company" placeholder="Company Name" required>
             </div>
             <div class="form-group">
                 <input type="text" class="form-control inputSk" name="administrator" id="administrator" placeholder="Administrator Account" required>
             </div>
             <div class="form-group">
                 <input type="email" class="form-control inputSk" id="pjEmail" name="pjEmail" placeholder="Email" required>
             </div>
             <div class="form-group">
                 <input type="email" class="form-control inputSk" id="pj_confirm_email" name="pj_confirm_email" placeholder="Confirm Email" required>
             </div>
             <div class="form-group">
                 <input type="password" id="pjPassword" class="form-control inputSk pwstrength_viewport_progress" placeholder="Password" required>
             </div>
             <div class="form-group">
                 <input type="password" id="pjConfirm_password" class="form-control inputSk" placeholder="Confirm Password" required>
             </div>
             <div class="actionForm">
                  <button type="button" id="pjSend" class="btn btn-default sk skBtn-primary submit">Sign up</button>
             </div>
         </form>
    </div>
    </div> <!-- end of pj panel -->

JS：

$("#pfRegister").validate({
    rules: {rules},
    messages: {msgs}
});

//companies validator
$("#pjRegister").validate({
    rules: {rules},
    messages: {msgs}
});

默认值和showErrors 设置在$.validator.setDefaults 中。

我试着用这个一一验证，但还是不行：

var pfreg = $("#pfRegister").validate({
    rules: {rules},
    messages: {msgs}
});

//companies validator
var pjreg = $("#pjRegister").validate({
    rules: {rules},
    messages: {msgs}
});

pjreg.element('input');
pfreg.element('input');

在网上搜索，我找到了一个可能的解决方案：

$("#pjRegister").each(function(){
    $(this).validate();
});

但是当我点击提交按钮时，表单不会验证。

Answer 1

您的第一个按钮是type="submit"，它由验证插件自动捕获，因此会触发验证。

您的第二个按钮是type="button"，它未被捕获，因此当您单击它时插件不会执行任何操作。

工作演示：http://jsfiddle.net/9o0zd4pt/1/