Как динамически отключить кнопку отправки, если имя пользователя уже выбрано?

Question

Я хочу динамически отключить кнопку отправки, используя javascript, если имя пользователя уже выбрано. Согласно моей логике c мой код должен работать, но это не так. Кто-нибудь может определить мою ошибку? Или это не способ сделать это?

python:

@socketio.on("submit username")
def username_check(data):
    if User.query.filter_by(username=data).count() == 0:
        emit("username check", True, broadcast=True)

Javascript:

document.addEventListener('DOMContentLoaded', () => {    

    // Connect to websocket
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

    // By default, submit button is disabled
    document.querySelector('#submit').disabled = true;

    // Enable button only if there is text in the input field
    socket.on('connect', () => {
        document.querySelector('#username').onkeyup = () => {
            socket.emit("submit username", document.querySelector('#username').value);
        };
    });

    socket.on('username check', data => {
        if (document.querySelector('#username').value.length > 0 && data === true)
            document.querySelector('#submit').disabled = false;
        else
            document.querySelector('#submit').disabled = true;
    });
});

HTML

   <form action='register' method='POST'>
    <input type='text' name='username' id='username' placeholder='username'><br>
    <input type='password' name='password' id='password' placeholder='password'><br>
    <input type='submit' name='submit' value='REGISTER' id='submit'>
  </form>

Мой код отключает кнопку отправки, когда ввод не производится, но не когда имя пользователя уже существует. Заранее спасибо!

редактировать: я добавил

else: 

    emit("username check", False, broadcast=True)

И теперь, похоже, работает. Но когда я печатаю быстро, это не работает. Есть ли способ заставить его работать лучше?

Answer 1

Условие data === true всегда ложно, потому что тип data не является Boolean (строгие сравнения сначала проверяют равенство типов). Вы должны написать:

if (document.querySelector('#username').value.length > 0 && data)

или использовать свободное равенство ('=='):

if (document.querySelector('#username').value.length > 0 && data == true)

или даже лучше сравнить:

data.length != 0