Flask 带WTF的Bootstrap模型

我在Bootstrap模式中有几个用户输入字段，我正在尝试在用户提交之前进行一些验证

我查阅了几篇相关的文章，到目前为止，没有一篇对我有用

所以我遇到的主要问题是，每次我按submit时，模式窗口都会关闭，这样用户就看不到错误消息。我希望模式窗口保持打开状态，直到成功提交

下面是我的语气

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#editModal" style="float:right">
  <span class="glyphicon glyphicon-edit"></span> Edit
</button>

<!-- Modal -->
<div class="modal fade" id="editModal" role="dialog" >
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content" >
      <div class="modal-header" >
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>Edit Your Login Information</h4>
      </div>

      <div class="modal-body">
        <form action="{{ url_for('.profile') }}" method='post' name='edit_user' class="form-horizontal" >
          {{ user_edit_form.csrf_token }}
          <div class="form-group col-xs-12 col-md-12 col-lg-12" style="background-color:white; !important ">
            <div class="col-xs-12 col-md-12 col-lg-12" >
              {{ render_field(user_edit_form.first_name) }}
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12">
              {{ render_field(user_edit_form.last_name) }}
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12">
              {{ render_field(user_edit_form.email) }}
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12">
              {{ render_field(user_edit_form.institute) }}
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12">
              <input class='btn btn-primary' id='uform' type='submit' value='UPDATE' style="float:right"/>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

编辑
&时代；
编辑您的登录信息
{{user_edit_form.csrf_token}
{{render_field（user_edit_form.first_name）}
{{render_field（user_edit_form.last_name）}
{{render_字段（user_edit_form.email）}
{{render_field（user_edit_form.institute）}

还有我正在努力让它工作的javascript

<script>
  var formErrors = {% if user_edit_form.errors %}true{% else %}false{% endif %};
  $(document).ready(function() {
    if (formErrors) {
      $('.Modal').modal('show');
    }
  });
</script>

var formErrors={%if用户_编辑_form.errors%}true{%else%}false{%endif%}；
$（文档）.ready（函数（）{
如果（格式错误）{
$（'.Modal'）.Modal（'show'）；
}
});

---

任何帮助都将不胜感激

首先，您需要阻止提交按钮的默认操作，即发送post请求并关闭模式表单。您可以使用

event.preventDefault（）

在提交按钮的

单击事件中执行此操作。接下来，将序列化表单数据并通过Ajax发送post请求。如果view函数返回“ok”，则隐藏对话框并重新加载当前页面。否则，您将显示带有错误消息的hml代码。采取以下步骤：

1。为您的表单提供一个id:

<form id="editForm" action="{{ url_for('.profile') }}" method="post" name="edit_user" class="form-horizontal">

3。修改查看功能

@main.route('/yourroute', methods=['GET', 'POST'])
def profile():
    form = YourForm()
    if form.validate_on_submit():
        user = UserEditForm()
        user.first_name = form.first_name.data
        user.last_name = form.last_name.data
        # ...
        db.session.add(user)
        db.session.commit()
        return jsonify(status='ok')
    return render_template('yourtemplate.html', form=form)

这不起作用，我不知道为什么，但出于某种原因，它什么也做不了，但感谢您的详细解释，我只是决定打开一个新页面，而不是在模态上进行编辑。这太仓促了。@MrLeeh，我们能在没有JS要求的情况下完成吗？@MrLeeh我认为在步骤3中，您需要用args初始化表单？否则，所有值都是空的，因为它只是一个空表单。如果我这样做的话，它在我这方面是有效的：form=YourForm（request.args）啊，没关系，那是因为我做了一个“get”请求。显然，当你发帖子时，它会神奇地填满表单，即使你似乎是从无到有地实例化了它。。。魔术…我有几乎相同的问题，但我需要在模式窗口中显示flash消息，而不关闭它。我已经在这里描述了我的问题
@main.route('/yourroute', methods=['GET', 'POST'])
def profile():
    form = YourForm()
    if form.validate_on_submit():
        user = UserEditForm()
        user.first_name = form.first_name.data
        user.last_name = form.last_name.data
        # ...
        db.session.add(user)
        db.session.commit()
        return jsonify(status='ok')
    return render_template('yourtemplate.html', form=form)