带WTF的Bootstrap模态

Question

我在Bootstrap Modal中有几个用户输入字段,我试图在用户提交之前进行一些验证.

我查看了几篇相关的文章,到目前为止我没有任何工作.

所以我遇到的主要问题是,每次按下提交时,模态窗口都会关闭,以便用户看不到错误消息.我希望模态窗口保持打开状态,直到成功提交为止.

以下是我的模态

<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>

和我试图让它工作的JavaScript

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

任何帮助将非常感谢!!

Answer 1

首先,您需要阻止提交按钮的默认操作,即发送帖子请求并关闭您的模态表单.您可以click使用提交按钮执行此操作event.preventDefault().接下来,您将序列化表单数据并通过Ajax发送发布请求.如果视图函数返回"ok",则隐藏对话框并重新加载当前页面.否则,您将显示带有错误消息的hml代码.采取以下步骤:

1.给你的表格一个id:

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

2.添加Javascript代码(需要jQuery)

$('#uform').click(function(event) {
  event.preventDefault();
  $.post(url, data=$('#editForm').serialize(), function(data) {
    if (data.status == 'ok') {
      $('#editModal').modal('hide');
      location.reload();
    }
    else {
      $('#editModal .modal-content').html(data);
    }
  });
})

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)