Question

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

例如，如果用户名是stringfield，则来自数据库。可以说值为“ 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中将“禁用”属性添加到“提交”按钮

<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 Submitfield验证

1 个答案: