Отображать модальное окно Bootstrap, если все обязательные поля заполнены
Вот мой текущий дизайн:
<div class = "container">
<div class = "col-lg-6 well">
<div class = "form-group">
<label>First Name</label>
<input id = "fn" class = "form-control" required />
</div>
<div class = "form-group">
<label>Last Name</label>
<input id = "ln" class = "form-control" required />
</div>
<div class = "form-group">
<button type = "submit" class = "btn btn-success" data-toggle = "modal"
data-backdrop = "static" data-keyboard = "false" data-target = "#signup">
Submit
</button>
</div>
</div>
</div>
<div id = "signup" class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-body">
<p>Signing up. Please wait...</p>
</div>
</div>
</div>
</div>
Дизайн позволяет мне отображать статическое модальное окно после нажатия кнопки отправки. Это не позволяет любому пользователю изменять что-либо в процессе регистрации.
Однако модальное окно пропускает проверку обязательных полей:
Любые предложения о том, как сначала запустить проверку перед отображением модального окна?
@kiranvj Я использую только обязательный атрибут HTML, но я открыт для предложений :)
Проверка на основе HTML с использованием атрибута required не будет блокировать события JS, возникающие при отправке формы. Вам, вероятно, понадобится библиотека для выполнения этой проверки, чтобы вы могли решить, действительна ли форма при отправке, а затем решить, следует ли отображать модальное окно.
Можешь попробовать это stackoverflow.com/questions/25311923/…
Ответы 2
Проблема в том, что атрибут required. Запустите модальное окно после проверки их содержимого, и если оно пустое (например), закройте модальное окно и покажите ошибку:
$('#signup').modal('hide');
Сначала вам нужно запустить модальное окно вручную. Удалите все атрибуты данных с кнопки и измените тип кнопки на кнопку
<button id = "submit-button" type = "button" class = "btn btn-success">
Submit
</button>
Затем вам нужно обработать нажатие кнопки и проверить поля ввода.
$(function() {
$("#submit-button").click(function() {
if ($("#fn").val() ! = "" && $("#ln").val() ! = "") {
$('#signup').modal('show');
$(this).closest("form").submit();
}
});
});
NB: могут быть подходы получше
Вы используете плагин jqvaldiation или пользовательские скрипты для проверки?