Flask wtforms submitfield validation based on change in form - html

Question

I am writing an update form with flask, wtforms and bootstrap4. This form gets value populated from database. I would like the submit button to be disabled if there is no change made in the value from the database.
for example, if username is stringfield, which comes from database. lets say the value is "abc123", so unless this value is changed by the user, submit button should be disable or atleast do not perform send any post request.
code looks like following
forms
class AccountForm(FlaskForm):
username = StringField('Username', validators=[Length(min=4, max=20), DataRequired()])
submit = SubmitField('Update’)
routes
#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

You can do this with jquery
$(function(){
var usernameValue = $('#username').val();
$('#username').change(function(){
if ($(this).val() != usernameValue){
$('input.btn-success').prop('disabled', false);
}
});
});
and add in your html the disabled attribute to the submit button
<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>