Question

所以我正在用bootstrap重建我的注册页面。我正在尝试合并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，否则转到下一个选项卡。我到底该怎么做？

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

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

结合Bootstrap和Validator

2 个答案: