Отобразить модальный Bootstrap, если все необходимые поля заполнены

Question

Вот мой текущий дизайн:

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

Дизайн позволяет отображать статический модал после нажатия кнопки подтверждения. Это мешает любому пользователю изменять что-либо в процессе регистрации.

Однако, модал пропускает проверку для обязательных полей:

Любые предложения о том, как сначала запустить проверку перед отображением модального значения?

Answer 1

Сначала вам нужно запустить модал вручную. Удалите все атрибуты данных с кнопки и измените тип кнопки на кнопку

<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(); 
       }
   });
});

Примечание: возможно, есть лучшие подходы

Информация по теме

Answer 2

Проблема в том, что required атрибут. Запустите модальный режим после проверки их содержимого и, если он пуст (например), закройте модальный и отобразите ошибку:

$('#signup').modal('hide');