基于表单更改的Flask wtforms提交字段验证

Question

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

例如，如果用户名是字符串字段，它来自数据库。假设值为“abc123”，因此除非用户更改此值，否则提交按钮应禁用或至少不执行发送任何发布请求。

代码如下

表格

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 中添加 disabled 属性到提交按钮

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