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

У меня есть сайт, созданный с помощью фреймворка начальной загрузки. Он имеет форму с несколькими обязательными текстовыми вводами и кнопкой отправки. Как и было, после нажатия кнопки "Отправить" открылась новая пустая HTML-страница с сообщением "Спасибо". Если обязательные поля не заполнены, появляется предупреждение и информация не отправляется до тех пор, пока обязательные поля не будут заполнены.

Я хочу изменить страницу с благодарностью на модальное окно с благодарностью. Моя проблема заключается в том, что с сообщением спасибо, установленным как модальное, модальное спасибо запускается с или без обязательных полей, имеющих информацию. Мне нужно, чтобы модал не появлялся, если не заполнены все обязательные поля, у кого-нибудь есть простой способ исправить это?

<form id="contact-form" name="myemailform" action="form-to-email.php" method="post" target="blank">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for='name'>
                            Name</label>
                        <input name="name" type="text" class="form-control" id="name" required placeholder="Enter Name" />
                    </div>
                    <div class="form-group">
                        <label for='email'>
                            Email Address</label> 
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
                            </span>
                            <input name="email" type="email" class="form-control" id="email" required placeholder="Enter Email" /></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for='message'>
                            Message</label>
                        <textarea name="message" id="message" class="form-control" rows="9" cols="25" required
                            placeholder="Message"></textarea>
                    </div>
                </div>
                <div class="col-md-12">
                    <button type="submit" name='submit' class="btn btn-skin pull-right" id="btnContactUs" value="Submit" target="blank" data-toggle="modal" data-target="#myModalThanks">
                        Send Message</button>
                </div>
            </div>
            </form>

1 ответ

Согласно описанию (непонятно), я чувствую, что вам нужна проверка вашей формы на стороне клиента. Посмотрите на этот плагин.

http://jqueryvalidation.org/documentation/

Другие вопросы по тегам