2017-06-14 241 views
0

如果名稱輸入爲空,我試圖停止提交表單。 我的代碼的作品禁用提交按鈕,但一旦我再次點擊並將其名稱保持禁用。我怎樣才能解決這個問題?如果名稱字段爲空,則不要提交表單

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

爲什麼不直接使用'required'屬性?你真的需要支持那些沒有實現它的古代瀏覽器嗎? – Barmar

+0

嗨@Barmar,謝謝你的回答。我不知道'require'屬性。有趣。我會圍繞它進行研究。不知道當你說他們沒有實現它時你的意思是什麼? –

+0

這是一個HTML5屬性。 IE9和更早版本沒有實現它。 – Barmar

回答

0

您需要添加該用戶已鍵入的東西,重新啓用按鈕的情況下。

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; 
    }); 
0
<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; 
    }); 
相關問題