名前フィールドが空の場合はフォームを送信しない

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; 
    });