停止提交空輸入值

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

停止提交空輸入值

回答

相關問題