结合引导程序和验证程序答案

【问题标题】：Combining Bootstrap and Validator结合引导程序和验证程序
【发布时间】：2012-11-01 17:25:32
【问题描述】：

所以我正在使用引导程序重建我的注册页面。我正在尝试合并 jquery 的验证器插件来验证表单。我做的第一件事是将表单分成三个部分，每个部分都有自己的选项卡。表单的第一页包含 3 个单选按钮选项，用户必须选择其中一个，然后才能进入下一页/选项卡/部分。所以这是我的html：

<ul class="nav nav-tabs">
  <li><a href="#options" data-toggle="tab">Options</a></li>
  <li><a href="#information" data-toggle="tab">Information</a></li>
  <li><a href="#payment" data-toggle="tab">Payment</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="options">
    <form id="frmtype1" action="" name="frmtype1" method="post">
        <header>Registration Options</header>
        <br/>
        <label for="Reg_type1" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type1" value="1" validate="required:true"/>
        Registering myself with credit card or bank account
        </label>
        <br>
        <label for="Reg_type2" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type2" value="2"/>
        Registering multiple people using credit card or bank account
        </label>
        <br>
        <label for="Reg_type3" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
        Registering using a purchase order
        </label>
        <div class="form-actions">
            <span class="help-inline" style="display:none;">Please choose an option</span><button class="btn" type="submit">Next</button>
        </div>
    </form>             
  </div>
  <div class="tab-pane" id="information">...</div>
  <div class="tab-pane" id="payment">...</div>
</div>

那么我的 jquery 是：

var val1 = $('#frmtype1').validate();
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

我想要做的是，如果用户在选择选项之前尝试单击下一步，我想显示内联文本说 Please choose an option 否则移动到下一个选项卡。我该怎么做呢？

【问题讨论】：

标签： jquery html forms twitter-bootstrap jquery-validate

【解决方案1】：

在活动选项卡中选择表单并检查它是否有效。如果不是，请显示您的消息并停止活动。

$(".nav-tabs a").click(function(e) {
    var form = $( ".tab-pane.active" );
    if ( !form.valid() ) {
        alert("You must complete the form before continuing to the next tab.");
        return false;
    }
});

【讨论】：

我需要显示内联文本而不是警报。
如果您之前在表单上调用了.validate()，它应该在调用.valid() 之后已经这样做了。（.validate() 不属于此点击事件，仅供参考）

【解决方案2】：

只需放置此 jquery 即可验证单选按钮：

var val1 = $('#frmtype1').validate({
    errorPlacement: function(error, element) {}, //this is to prevent the standard error message from showing, rather you use the inline-text
    rules: {
        'Reg_type': {
            required: true
        }
    }
});

然后显示/隐藏错误消息：

$('#frmtype1').submit(function(e) {
    if(val1.form()) {
        $('.help-inline').hide();
    } else {
        $('.help-inline').show();
        return false;
    }
});

【讨论】：