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)

带WTF的Bootstrap模态

1 个答案: