停止提交空输入值

Im寻找一个简单的解决方案来阻止登录表单提交空输入字段。表单的代码如下。如果可能的话，我想用一个简单的Javascript soluiton。停止提交空输入值

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button> 
</form>

如果可能我还想改变空白字段的边界。

在此先感谢。

来源

2009-07-25 Brad Birdsall

示例代码与虚拟检查：

<script type="text/javascript"> 
function checkForm(form) { 
    var mailCheck = checkMail(form.elements['email']), 
     pwdCheck = checkPwd(form.elements['pwd']); 
    return mailCheck && pwdCheck; 
} 

function checkMail(input) { 
    var check = input.value.indexOf('@') >= 0; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 

function checkPwd(input) { 
    var check = input.value.length >= 5; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 
</script> 

<style type="text/css"> 
#login input { 
    border: 2px solid black; 
} 
</style> 

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button> 
</form>

来源

2009-07-25 21:06:56 Christoph

可能的方法：

设定行动#
添加处理程序提交按钮或形式
变化形式的行动onsubmit，如果文本字段不为空

编辑：为了使这个工作甚至为非JavaScript用户插入# - 页面加载时的操作。

来源

2009-07-25 18:58:02 TheHippo

并且不要忘记添加返回false;在您的onsubmit处理程序中，如果文本字段为空。另外，请查看jQuery Validation插件，以获得更好的验证表单的方法：http://docs.jquery.com/Plugins/Validation – 2009-07-25 19:07:10

为了保持最小的我只想用：

<form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}">

授予 - 没有指出什么不对劲给用户，但工程请客。

来源

2012-02-23 14:49:10

停止提交空输入值

回答

相关问题