如何防止提交，如果輸入爲空與javascript

Question

我有一個登錄表單，但我想檢查，如果字段爲空，那麼不要提交。我在提交時沒有返回false，但瀏覽器仍然加載一個新頁面。我怎麼能阻止呢？

JS：

var username = document.getElementById('usernameField'); 
    var password = document.getElementById('passwordField'); 
    var loginBtn = document.getElementById('loginBtn'); 
    var infoBox = document.getElementById('formInfo'); 

    var isEmpty = /^\s*$/; 

    var addEventTo = function(id, type, fn, capture) { 
     if (document.addEventListener) { 
      id.addEventListener(type, fn, capture); 
     } else { 
      id.attachEvent('on'+type, fn); 
     } 
    }; 

    function checkIfAllEmpty() { 
     var loginForm = document.getElementById('loginform'), 
      allInputs = loginForm.getElementsByTagName('input'), 
      max = allInputs.length, 
      i; 

      for (i = 0; i < max; i++) { 
       if (allInputs[i].type !== 'submit') { 

        if (allInputs[i].match(isEmpty)) { 
         infoBox.innerHTML = 'All your fields are empty'; 
         return false; 
        } 
      } 
     } 
    } 

    //addEventTo(loginBtn, 'click', checkIfAllEmpty, false); 

    if (document.addEventListener) { 
      loginBtn.addEventListener('submit', checkIfAllEmpty, false); 
    } else { 
      loginBtn.attachEvent('onsubmit', checkIfAllEmpty); 
    } 

HTML：

<p id="formInfo"></p> 
<form id="loginForm" method="post" action="#"> 
    <fieldset id="loginFieldset"> 
     <legend>Sign in</legend> 
     <ol> 
      <li> 
       <label for="usernameField">Username</label><input type="text" placeholder="Enter username" id="usernameField" /> 
       <span>Please type in your username</span> 
      </li> 
      <li> 
       <label for="passwordField">Password</label><input type="password" placeholder="Enter password" id="passwordField" /> 
       <span>Please type your password</span> 
      </li> 
      <li> 
       <input type="submit" value="Sign in" id="loginBtn" /> 
      </li> 
     </ol> 
    </fieldset> 
</form> 

非常感謝

Answer 1

如果確定去與HTML5（正常工作與Safari瀏覽器，Chrome瀏覽器的新版本， Firefox，Opera> 11.00，但通常沒有IE），您可以在輸入字段中添加所需的標籤。

<p id="formInfo"></p> 
    <form id="loginForm" method="post" action="#"> 
    <fieldset id="loginFieldset"> 
     <legend>Sign in</legend> 
     <ol> 
     <li> 
     <label for="usernameField">Username</label> 
     <input type="text" placeholder="Enter username" id="usernameField" required /> 
     <span>Please type in your username</span> 
     </li> 
     <li> 
     <label for="passwordField">Password</label> 
     <input type="password" placeholder="Enter password" id="passwordField" required /> 
     <span>Please type your password</span> 
     </li> 
     <li> 
      <input type="submit" value="Sign in" id="loginBtn" /> 
     </li> 
    </ol> 
</fieldset> 

Answer 2

您可以使用禁用= 「禁用」 的形式輸入的屬性：

http://www.w3schools.com/tags/att_input_disabled.asp

將提交按鈕設置爲禁用，然後向每個輸入字段添加一個onchange偵聽器，以便如果每個字段都已填充，則刪除disable屬性，並且用戶可以對錶單進行子查詢。

Answer 3

貌似的onsubmit的事件監聽器沒有被正確添加，反正要做到這一點是添加的onsubmit =「返回someValidationFuncThatReturnTrueOrFalse（）」在你的形式最簡單的方法：

<form id="loginForm" method="post" action="#" onsubmit="return validate()"> 

我可以問爲什麼你在你的js代碼中使用這種方法？它可以做很多很容易，如果你的表格是靜態的......

function validate() { 
    if (document.getElementById("usernameField").value == "" && document.getElementById("usernameField").value == "") { 
     alert("all fields are empty"); 
     return false; 
    } else { 
     return true; 
    } 
} 

或類似的東西...

Answer 4

我使用的原型（如JavaScript框架）和該代碼應工作：

JS：

function checkEmpties() { 
    var usr = $('username'); 
    var pass = $('pass'); 
    var frm = $('formId'); 


    if (usr.value && pass.value) { 
     //frm.submit(); 
     alert('submit'); 
    } else { 
     alert('failed'); 
    } 
} 

Event.observe(window, 'DomReady', function() { 
    var btn = $('submitBtn'); 
    Event.observe('submitBtn', 'click', checkEmpties); 
} 

HTML：

<form id="formId"> 
    <input type="text" name="username" id="username" /> 
    <input type="password" name="pass" id="pass" /> 
    <input type="button" id="submitBtn" value="Send" /> 
</form> 

它所確實： 一旦文檔已經加載，就會將一個事件觀察者附加到該按鈕上，所以當它被點擊時，函數checkEmpties被調用。 該函數將檢索輸入的值，如果它們不是空的，則提交表單。

希望它有幫助