Оставьте модальное окно открытым, показывая ошибки проверки WTForms - PullRequest
Новая
       41

Оставьте модальное окно открытым, показывая ошибки проверки WTForms

1 голос
/ 27 мая 2020

У меня есть форма ( WTForms ), которая является DataRequired. Эта форма живет в модальном окне. Это просто поле textarea, и у меня есть CKEditor , работающий с ним, поэтому он отображается как небольшая текстовая область WYSIWYG. Я добавил в свою форму атрибут « novalidate », потому что я хочу, чтобы ошибка проверки от WTForms давала обратную связь вместо уродливого всплывающего окна, встроенного в браузер.

Проблема : мое модальное окно закрывается, когда я нажимаю "Отправить" без ввода текста. Есть ли какой-либо способ jQuery / JS оставить модальное окно открытым, показывая ошибку проверки, вместо того, чтобы разрешить модальному закрытию и обновить sh страницу до того, как ошибки проверки предоставят пользователю обратную связь?

Это мой модальный с формой: 

<div class="modal fade" id="reviewPerfumeModal" tabindex="-1" role="dialog" aria-labelledby="reviewPerfumeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reviewPerfumeModal">Please Leave a Review</h5>
            </div>
            <div class="modal-body">
                <form method=POST action="{{ url_for('reviews.review_perfume', perfume_id=perfume._id) }}" id="form-review">
                    {{ add_review_form.hidden_tag() }}
                    <fieldset class="form-group">
                        <div class="form-group">
                            {% if add_review_form.review.errors %}
                            {{ add_review_form.review(class="form-control form-control-md is-invalid")}}
                            <div class="invalid-feedback">
                                {% for error in add_review_form.review.errors %}
                                <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                            {% else %}
                            {{ add_review_form.review(class="form-control form-control-md ckeditor", placeholder="Review")}}
                            {% endif %}
                        </div>
                    </fieldset>
                    <div class="modal-footer">
                        <div class="form-group">
                            {{ add_review_form.submit(class="btn btn-primary")}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

PS: Это прекрасно работает, если форма не находится в модальном окне. Я просто хочу, чтобы модальное окно оставалось открытым, показывая ошибки.

Спасибо !!

1 Ответ

0 голосов
/ 27 мая 2020

Я мало что знаю об этом топи c, но попробуйте следующее: 

{% if add_review_form.review.errors %}
<script>
  javascriptFunctionToOpenModal();
</script>
{% endif %}
...