Используйте Bootstrap Модальный после того, как все обязательные поля были заполнены - PullRequest
Новая
       20

Используйте Bootstrap Модальный после того, как все обязательные поля были заполнены

0 голосов
/ 08 января 2020

РЕДАКТИРОВАТЬ : я заметил, что, когда я нажимаю кнопку внутри модального окна, появляется обязательное всплывающее окно, которое не позволяет go вкл.

мне нужно использовать bootstrap модальный, чтобы добавить некоторые детали о некоторых авторизации. Итак, у меня есть страница cs html с некоторыми обязательными полями и кнопкой, которая открывает модал. Но, когда я нажимаю кнопку, появляется модальный режим, даже если поля пусты. Как я могу решить эту проблему?

Код кнопки: 

<div class="col-sm-2"><input type="submit" value="@Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" /></div>

Модальный (это не тот, который я буду использовать, я положил это в свой CS html только для тестов): 

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-5">
                    <i class="fas fa-envelope prefix grey-text"></i>
                    <input type="email" id="defaultForm-email" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                    <i class="fas fa-lock prefix grey-text"></i>
                    <input type="password" id="defaultForm-pass" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-default">Login</button>
            </div>
        </div>
    </div>
</div>

Это график c результат:

As you can see

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

Идея, которая у меня возникла, состоит в том, чтобы открыть модальное значение на JS, только если все обязательные поля были заполнены. Но я хочу знать, есть ли более элегантный способ сделать это.

Спасибо.

Ответы [ 2 ]

1 голос
/ 08 января 2020

Предотвращение модели перед проверкой с использованием приведенного ниже кода,

Html: 

<input type="text" id="txt_name" /><button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

Jquery: 

$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($("#txt_name").val().length==0) {
e.stopPropegation();
}  
});
0 голосов
/ 08 января 2020

Я думаю, что тип атрибута в вашем коде кнопки является причиной проблемы. Попробуйте изменить значение «отправить» на «кнопку».

...