Question

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

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

在第一个标签上填写所需信息后，他应该被定向到第二个标签，用户在第一个标签中填写的信息应该保存在数据库中，点击保存按钮，这是第一个标签上的

Answer 1

为了回答你的问题，我刚写了一个简单的片段，你可以在表格填写时填写。

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

为了禁用启用，我刚删除了引导程序表单或添加了＆＃39; data-toggle =＆＃34;标签＆＃34;＆＃39;没有添加类或其他CSS。

为了检查表格是否已填写，我添加了一个类＆＃34; required＆＃34;对于您想要控制的字段，并编写了一个功能，其中检查点击＆＃39;如果该字段不为空，则为event。

或者如果您想要实现一个用于验证表单的就绪插件，并且花费更少的时间来编写自定义代码，请查看此链接

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

＆＃13;

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!');
  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: