WTForms TextAreaField DataRequired not raising validation error in Bootstrap modal

问题

I have a very small form in a bootstrap modal including just two fields: a TextAreaField and a Submit button. My TextAreField is DataRequired.

On top of that this field uses CKEditor (similar to quillsJS) to make the text area WYSIWYG.

Problem is that the form submits even when no data has been entered, and reloads the parent page.

I would very much like to know how to prevent that form submission and raise the validation error when no data has been entered.

I would like to get WTForm validation and not the browser's (which anyway doesn't work either for this case).

I should also mention, in case it matters, that my modal is a partial file (jinja).

My trigger for the modal is this, living in perfume-cursor.html

<a href="{{ url_for('perfumes.edit_perfume', perfume_id=perfume._id) }}" class="btn btn-primary btn-sm mt-2">Edit</a>

And this is my modal (in a partial file perfume-modals.html)

<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="deleteUserModal">Please Leave a Review</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method=POST action="{{ url_for('reviews.review_perfume', perfume_id=perfume._id) }}" id="form-review">
                    <fieldset class="form-group">
                        <div class="form-group">
                            {{ form.review(class="form-control form-control-md", placeholder="Review", id="description") }}
                        </div>
                    </fieldset>
                    <div class="modal-footer">
                        <div class="form-group">
                            {{ form.submit(class="btn btn-primary") }}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

The id="description" is what CKEditor uses to render that text area field as a WYSIWYG editor, btw.

I would really appreciate a lot any help on this!!

Thanks in advance!

Update:

In case it helps this is my form class, although I'm pretty sure the issue is modal related and not WTF related:

class AddReviewForm(FlaskForm):
    review = TextAreaField("Review", validators=[DataRequired()])
    submit = SubmitField("Post Review")

来源：https://stackoverflow.com/questions/61963633/wtforms-textareafield-datarequired-not-raising-validation-error-in-bootstrap-mod

标签

python

Flask

jinja2

flask-wtforms