0

I am trying to validate my form, I am having some difficulty. I have tried two the methods, I like the keyup method but think it will be a bit too complicated. One of the biggest issues is submitting the form automatically after the username has been checked against the database.

This is server side

# Get users from database
users = db.execute("SELECT username FROM users")

# Get user input from form
username = request.args.get('username')

# Set value to true can use username unless false
data = jsonify({'value': True})

# Check if username is taken and set value to false
for i in range(len(users)):
    if username == users[i]['username']:
        data = jsonify({'value': False})
        return data

return data

This is client side JS

    $(document).ready(function() {
        $('form').on('submit', function(event) {
            $.ajax ({
                url: '/check',
                type: 'GET',
                data: {
                    'username': $('#username').val()
                }
            })
            .done(function(data) {
                if (data.value === true) {
                    ('#successAlert').text('Username available').show();
                }
                if (data.value === false) {
                    ('#errorAlert').text('Username unavailable').show();
                }
            })
            event.preventDefault();
        });
    });

This is the keyup method

    $(document).ready(function(){
        $('#username').keyup(checkUsername)
    })
    function checkUsername(){

        $.ajax({
            url: '/check',
            type: 'GET',
            data: {
                username: $('#username').val()
            },
            cache: false,
            success: function(response){
                if (response.value === false){
                    $('#errorAlert').text('Username unvavailable').show()
                    $('#successAlert').hide()
                }
                else {
                    $('#successAlert').text('Username available').show()
                    $('#errorAlert').hide()
                }
            }
        })
    }

1 Answer 1

0

I figured it out. I set ajax query to async to false, this allows form the form to automatically submit to the register route after being validated. If anyone else has a better solution I am happy to hear it

    $(document).ready(function(){
        $('form').submit(function(event){
            let valid = false
            $.ajax({
                url:'/check',
                type: 'get',
                cache: false,
                async: false,
                data: {
                    username: $('#username').val()
                },
                success: (function(response){
                    if (response.value === true){
                        $('#errorAlert').hide()
                        return valid = true
                    }
                    else {
                        $('#errorAlert').text('Username unvavailable').show()
                        $('#successAlert').hide()
                    }
                })
            })
            if (valid === false){
                event.preventDefault()
            }
        })
    })

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .