Как отобразить сообщение об ошибке, если пользователь нажимает на вторую вкладку перед заполнением данных первой вкладки

Question

Как отобразить сообщение об ошибке, если пользователь нажимает на вторую вкладку перед заполнением данных первой вкладки

При нажатии кнопки отображаются четыре вкладки начальной загрузки и по умолчанию отображается информация о первой вкладке.

Но если пользователь нажимает на второй вкладке вместо заполнения информации на первой вкладке, должно отображаться сообщение об ошибке, и ему нельзя позволять нажимать на любую из вкладок, если он не заполняет информацию на первой вкладке.

После заполнения необходимой информации на первой вкладке он должен быть направлен на вторую вкладку, а информация, заполненная пользователем на первой вкладке, должна быть сохранена в базе данных по нажатию кнопки сохранения, которая есть на первой вкладке.

1

bootstrap-tabs jquery mysql php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Для ответа на ваш вопрос я просто написал простой фрагмент, где вы можете получить, когда форма заполнена или нет.

внутри isValid, true или false вы можете запустить весь свой пользовательский код.

Для включения отключил форму начальной загрузки, которую я только что удалил или добавил data-toggle = «tab» без добавления класса или других CSS.

Чтобы проверить, заполнена ли форма, я добавил класс «требуемый» для полей, которыми вы хотите управлять, и написал функцию, где проверяется событие «при нажатии», если эти поля не равны NULL.

альтернативно если вы хотите внедрить готовый плагин для проверки вашей формы и тратить меньше времени на кодирование своего пользовательского кода, проверьте эту ссылку

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>

0

Другие решения

Других решений пока нет …

Источник