如何防止提交，如果输入为空与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被调用。 该函数将检索输入的值，如果它们不是空的，则提交表单。

希望它有帮助