Question

如果名称输入为空，我试图阻止表单提交。我的代码可以禁用提交按钮，但是一旦我再次点击并输入一个名称，它就会被禁用。我该如何解决这个问题？

<input type="text" id="name" name="user_name">
<button type="submit">Register</button>

const register = document.querySelector('button[type="submit"]');

function errorNameInput () {
    let nameUser = document.getElementById('name').value;
    if (nameUser == '') {
        register.disabled = true;
        console.log('please, fill in name');
    } else {
        console.log('submit');
    }
    document.getElementById('name').value = '';
}

register.addEventListener("click", 
    function(){
        errorNameInput();
        return false;
    });

Answer 1

您需要添加用户输入内容并重新启用按钮的情况。

function errorNameInput () {
    let nameUser = document.getElementById('name').value;
    if (nameUser == '') {
        register.disabled = true;
        console.log('please, fill in name');
    } else {
        register.disabled = false;
        console.log('submit');
    }
    document.getElementById('name').value = '';
}

register.addEventListener("click", 
    function(){
        errorNameInput();
        return false;
    });

Answer 2

<input type="text" id="name" name="user_name">
<button type="submit">Register</button>

const register = document.querySelector('button[type="submit"]');

function errorNameInput () {
    let nameUser = document.getElementById('name').value;
    if (nameUser == '') {
        register.disabled = true;
        console.log('please, fill in name');
    } else {
        register.disabled = false;
        console.log('submit');
    }
    document.getElementById('name').value = '';
}

register.addEventListener("click", 
    function(){
        errorNameInput();
        return false;
    });

如果名称字段为空，则不提交表单

2 个答案: