CODEWITHSUNDEEP
pythonflaskjinja2flask-wtforms
taylormade201
taylormade201

Reputation: 696

Validate WTForm before submitting

Is it possible to validate a WTForm field after leaving the field but before submit? For example, after entering a username, that field is validated to see if its available and shows a checkmark, before the user clicks submit.

Upvotes: 5

Views: 2370

Answers (1)

davidism
davidism

Reputation: 127190

When the field is changed, perform a check and change the text in an adjacent node. Some things can be validated directly in the browser. To validate against data on the server, send a request with JavaScript to a view that checks the data and returns a JSON response.

@app.route('/username-exists', methods=['POST'])
def username_exists():
    username = request.form['username']
    exists = check_if_user_exists(username)
    return jsonify(exists=exists)

<input id='username' name='username'>
<p id='username-status'></p>

var username_input = $('#username');
var username_status = $('#username-status');

$('#username').on('focusout', function () {
    $.post(
        "{{ url_for('username_exists') }}",
        {
            username: username_input.val()
        },
        function (data) {
            username_status.text(data.exists ? '✔️' : '🙅');
        }
    );
});

This example uses jQuery, but the concept is not specific to any library.

Alternatively, post the entire form to a separate view that only validates the fields, then return jsonify(form.errors) and do something with them in the browser. The code would be essentially the same as above, with some extra logic to put the error messages next to the correct fields.

Remember to still validate the data when the form is submitted, as requests can be made outside the browser with other

Upvotes: 5

Related Questions