Flask wtforms 提交字段验证基于表单的变化

Question

我正在用 flask、wtforms 和 bootstrap4 编写更新表单。此表单获取从数据库填充的值。如果数据库中的值没有变化，我希望禁用提交按钮。

例如，如果用户名是来自数据库的stringfield。假设值为 "abc123"，因此除非用户更改此值，否则提交按钮应禁用或至少不执行发送任何 post 请求。

代码如下所示

表格

class AccountForm(FlaskForm):
    username = StringField('Username', validators=[Length(min=4, max=20), DataRequired()])
    submit = SubmitField('Update’)

路线

@app.route("/account", methods=['GET', 'POST'])
def account():
    form = AccountForm()
    if form.validate_on_submit():
        username = str(form.username.data).lower()
        # ….. update database

    elif request.method == 'GET':
            form.username.data = username_from_db
    return render_template(‘account.html', form=form)

html

<form method="POST" action="" enctype="multipart/form-data">
          {{form.csrf_token}}

          <input class="form-control" id="username" name="username" placeholder="Username" required type="text" value=“abc123">

          <input type="submit" class="btn btn-success" value="Update">
 </form>

Answer 1

您可以使用 jquery

$(function(){
    var usernameValue = $('#username').val();
    $('#username').change(function(){
        if ($(this).val() != usernameValue){
            $('input.btn-success').prop('disabled', false);
        }
    });
});

并将您的 html 禁用属性添加到提交按钮

<form method="POST" action="" enctype="multipart/form-data">
          {{form.csrf_token}}

          <input class="form-control" id="username" name="username" placeholder="Username" required type="text" value=“abc123">

          <input type="submit" class="btn btn-success" value="Update" disabled>
 </form>

Flask wtforms 提交字段验证基于表单的变化

Flask wtforms submitfield validation based on change in form

html

flask

wtforms

bootstrap-4