Bootstrap标签+表单：完成第一个标签验证后如何启用第二个标签

问题描述

我试图（最终）将表格拆分为多个Bootstrap选项卡，但是我遇到了麻烦 下一个按钮。

如果if表单的第一部分未填写，是否可以避免第二个标签？

大多数字段是必填字段，如果您跳至第二步而未填写表单的第一部分，则无法发送请求。

<form method="post" role="form" class="stg-form">
    <div id="tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a class="nav-link active" href="#tab1" data-toggle="tab">STEP 01</a></li>
            <li><a class="nav-link" href="#tab2" data-toggle="tab">STEP 02</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <div class="row">
                    <div class="col-lg-6 col-sm-12">
                        <p>
                            <label>Il tuo nome:</label><br>
                            <input required="required" name="stg_ticket_name" value="" type="text" class="stgh_standart_field">
                        </p>
                    </div>
                    <div class="col-lg-6 col-sm-12">
                        <p>
                            <label>Cognome:</label><br>
                            <input  required = 'required' type='text' name='stgh_custom_fields[custom_field_5]' value='' class="stgh_custom_fields"/>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-12">
                        <p>
                            <label>Telefono:</label><br />
                            <input  required = 'required' type='text' name='stgh_custom_fields[custom_field_6]' value='' class="stgh_custom_fields"/>
                        </p>
                    </div>
                    <div class="col-lg-6 col-sm-12">
                        <p>
                            <label>Azienda:</label><br>
                            <input  required = 'required' type='text' name='stgh_custom_fields[custom_field_7]' value='' class="stgh_custom_fields"/>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <p>
                            <label>Indirizzo email:</label><br>
                            <input required="required" name="stg_ticket_email" value="" type="text" class="stgh_standart_field">
                        </p>
                    </div>
                </div>
                <div class="tab-pane active" id="tab1">
                    <a class="btn btn-primary btnNext">Next</a>
                </div>
            </div>
            <div class="tab-pane" id="tab2">                    
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <p>
                            <label>Descrizione:</label><br>
                            <textarea required="required" name="stg_ticket_message" class="stgh_standart_field"></textarea>
                        </p>
                    </div>
                </div>              <br>
                <button value="" name="stgsubmit" id="stgsubmit" type="submit">Invia</button>
            </div>
        </div>
    </div>
</form>

这是我的“ NEXT”按钮

$('.btnNext').click(function() {
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

$('.btnPrevIoUs').click(function() {
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）