如果用户在填写第一个选项卡的数据之前单击第二个选项卡，如何显示错误消息

Question

单击按钮，显示四个引导选项卡，默认情况下显示第一个选项卡信息。

但是，如果用户单击第二个选项卡而不是在第一个选项卡中填写信息，则应该显示错误消息，并且不应该允许他单击任何选项卡，除非他在第一个选项卡中填写信息。

在第一个选项卡上填写所需信息后，他应该被引导到第二个选项卡，用户在第一个选项卡中填写的信息应该在单击保存按钮时保存在数据库中，这是在第一个选项卡上。

Answer 1

为了回答你的问题，我只是写了一个简单的代码片段，你可以得到什么时候填写或不填写表单。

内部的isValid, true或false，你可以运行所有的自定义代码。

对于启用禁用引导形式，我只是删除或添加'data-toggle="tab"'，而不添加class或其他css。

检查表单是否填写，我添加了一个类"required"为您想要控制的字段，并编写了一个函数，检查'on click'事件，如果字段不为空。

或者如果你想实现一个现成的插件来验证你的表单，花更少的时间来编写自定义代码，那么检查这个链接

http://formvalidation.io/examples/bootstrap-wizard/

function validateForm() {
  
  var isValid = true;
  $('#installationForm .form-group .required').each(function() {
    if ( $(this).val() === '' )
        isValid = false;
  });
  return isValid;
}
$('.next-tab').on('click', function(event) {
    var result = validateForm();
  if (result) {
    $('.next a').attr('data-toggle', 'tab');
    
  } else {
      $('.next a').removeAttr('data-toggle');
    alert('You have to fill the form before!');
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="installationForm" class="form-horizontal">
    <ul class="nav nav-pills">
        <li class="active"><a href="#basic-tab" data-toggle="tab">Site information</a></li>
        <li class="next"><a class="next-tab" href="#database-tab" data-toggle="tab">Database</a></li>
    </ul>
    <div class="tab-content">
        <!-- First tab -->
        <div class="tab-pane active" id="basic-tab">
            <div class="form-group">
                <label class="col-xs-3 control-label">Site name</label>
                <div class="col-xs-5">
                    <input type="text" class="required form-control" name="name" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label">URL</label>
                <div class="col-xs-7">
                    <input type="text" class="required form-control" name="url" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label">Owner email</label>
                <div class="col-xs-5">
                    <input type="text" class="required form-control" name="email" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label">Description</label>
                <div class="col-xs-7">
                    <textarea class="required form-control" name="description" rows="6"></textarea>
                </div>
            </div>
        </div>
        <!-- Second tab -->
        <div class="tab-pane" id="database-tab">
            <div class="form-group">
                <label class="col-xs-3 control-label">Server IP</label>
                <div class="col-xs-5">
                    <input type="text" class="form-control" name="dbServer" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label">Database name</label>
                <div class="col-xs-5">
                    <input type="text" class="form-control" name="dbName" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label">Database user</label>
                <div class="col-xs-5">
                    <input type="text" class="form-control" name="dbUser" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-3 control-label">Password</label>
                <div class="col-xs-5">
                    <input type="password" class="form-control" name="dbPassword" />
                </div>
            </div>
        </div>
        <!-- Previous/Next buttons -->
        <ul class="pager wizard">
            <li class="previous"><a href="javascript: void(0);">Previous</a></li>
            <li class="next"><a href="javascript: void(0);">Next</a></li>
        </ul>
    </div>
</form>
<div class="modal fade" id="completeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Complete</h4>
            </div>
            <div class="modal-body">
                <p class="text-center">The installation is completed</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Visit the website</button>
            </div>
        </div>
    </div>
</div>