2012-03-15 33 views
1

私は、ユーザー名とパスワードは、ログインフォームに入力されているか否かをJavaScriptコードチェックはフォーム送信をブロックするにはどうすればよいですか?

<form name="LoginUser" method="post" action="LoginUser" onsubmit="checkEntries()"> 
       <table width="78%" height="90" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
       <td width="47%" align="right" class="textstyle">Username: 
        <label for="username2"></label></td> 
       <td width="53%" class="textstyle"> 
        <input type="text" name="username" id="username" /><div id="testuser"></div> 
       </td> 
       </tr> 
       <tr> 
       <td align="right" class="textstyle">&nbsp;</td> 
       <td>&nbsp;</td> 
       </tr> 
       <tr id="passRow"> 
       <td align="right" class="textstyle">Password:</td> 
       <td><label for="password"></label> 
        <input type="password" name="password" id="password"/> 
Forgot Password?? Click here...    
<div id="testpwd"></div></td> 
       </tr> 
       <tr> 
       <td align="right" class="textstyle">&nbsp;</td> 
       <td>&nbsp;</td> 
       </tr> 
       <tr> 
       <td align="right" class="textstyle">&nbsp;</td> 
       <td><input type="checkbox" name="rempass" id="rempass" /> 
        <span class="textstyle">Remember my password</span></td> 
       </tr> 
       <tr> 
       <td align="right" class="textstyle">&nbsp;</td> 
       <td class="textstyle">&nbsp;</td> 
       </tr> 
       <tr> 
       <td align="right" class="textstyle">&nbsp;</td> 
       <td class="textstyle"> 
        <input type="submit" name="login" id="login" value="Sign in" /> 
        </td> 
       </tr> 
      </table> 
     </form> 

としてのJavaScript

function checkEntries() 
{ 
    if(document.getElementById("username")=="" && document.getElementById("password").value=="") 
    { 
     alert("Please enter username and password"); 
    } 
    if(document.getElementById("username").value=="") 
    { 
     alert("Please enter username"); 
    } 
    if(document.getElementById("password").value=="") 
    { 
     alert("Please enter password"); 
    } 
} 

とHTMLコードにコードを次のようしています。それは正常に動作しています。しかし、エラーを表示した後、フォームを送信します。

ユーザー名とパスワードが入力されていない場合は、このフォームを送信しないでください。ログインページに留まるだけです。どうすればこれを達成できますか?

答えて

2

試してみてください。

 

function checkEntries() { 
    var errFlag = false; 
    var errMsg = ""; 
    var username = document.getElementById("username"); 
    var password = document.getElementById("password") 
    if(username == "") { 
     errMsg += "Please enter username.\n"; 
     errFlag = true; 
    } 
    if(password == "") { 
    errMsg += "Please enter password"; 
    errFlag = true; 
    } 
    if(!errFlag) { 
     return true; 
    }else { 
     alert(errMsg); 
     return false; 
    } 
} 
 

そして、あなたのonSubmit上:

 

<form name="LoginUser" method="post" action="LoginUser" onsubmit="return checkEntries();"> 
 

は、それが

+0

ハーッ...アロフト感謝の男に役立ちます願っています。私はとてもばかだ。 return文を忘れるには? :Dおかげでそれは働いた.. :) –

+0

それはあなたのために働いていたことを知ってうれしい..あなたは受け入れられたとして答えをマークすることができます.. :) –

+0

ya sure..done already :) –

関連する問題