带WTF的Bootstrap模态

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

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

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

以下是我的模态

   Edit




  


    
    

      

        ×
        
Edit Your Login Information
      

      

        

          {{ user_edit_form.csrf_token }}
          

            

              {{ render_field(user_edit_form.first_name) }}
            
            

              {{ render_field(user_edit_form.last_name) }}
            
            

              {{ render_field(user_edit_form.email) }}
            
            

              {{ render_field(user_edit_form.institute) }}
            
            

              
            
          
        
      
    
  

和我试图让它工作的JavaScript

任何帮助将非常感谢!!

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

1.给你的表格一个id:

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)