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

Question

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

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

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

Answer 1

为了回答您的问题，我只写了一个简单的片段，您可以在其中获取表格何时填写。

在 isValid、true 或 false 中，您可以运行所有自定义代码。

为了启用禁用我刚刚删除的 Bootstrap 表单或添加“data-toggle="tab"'而不添加类或其他 css。

为了检查表单是否已填写，我为您要控制的字段添加了一个“必填”类，并编写了一个函数，如果该字段不为空，则检查“点击”事件。

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

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>