2009-07-25 9 views
6

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>  

可能であれば、空欄の枠を変更したいと思います。

ありがとうございます。

答えて

9

サンプルコード:

<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> 
3

可能なアプローチ:

  • 設定アクションのテキストフィールドが空でない場合は、送信ボタンまたはフォーム
  • 変更フォームのアクションのonsubmitにハンドラを追加する#
  • から

編集:これをJavaScript以外のユーザーでも使用するには、# - ページがロードされたときの動作。ダミーのチェックと

+1

また、falseを返すことを忘れないでください。 onsubmitハンドラで、テキストフィールドが空の場合。また、フォームの検証のためのより良いアプローチについては、jQuery Validationプラグインを参照してください。http://docs.jquery.com/Plugins/Validation –

+0

あなたは偽を返します。しかし、私は質問でjQueryについて何も見たことがありません;-) – TheHippo

+0

可能であれば、あなたが意味するものの例を提供することができます。私はJSにとって少し新しいです。私のルーツはxHTMLとCSSです。 –

2

は、私はちょうど使用する最小限のそれを維持する:

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

付与 - ユーザーに間違っだが、御馳走をどのような作品指摘していません。

関連する問題