2012-05-07 4 views
0

HTMLに2つのテキストフィールドがあります。ボタンをクリックすると、空でないことを確認する必要があります。JS 2つのテキストフィールドが空でないかどうかを確認します。

が、私は、私の二番目は1つの作業動作していないが、ここで

コード:私はどちらかだけでなく、しかし、働いていない

onclick="notEmpty(document.getElementById('req1'), ('req2'),'Please Enter a Value')" 

を試してみました

<!DOCTYPE html "> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>appLounge webService</title> 
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="css/demo2.css" /> 

<script type='text/javascript'> 
function notEmpty(login, password, helperMsg){ 
    if(login.value.length == 0){ 
     alert(helperMsg); 
     login.focus(); 
     return false; 
    } 

    if(password.value.length == 0){ 
     alert(helperMsg); 
     password.focus(); 
     return false; 
    } 

    return true; 
} 

</script> 
</head> 



<body> 
<div class="container_12"> 

<!-- login data --> 

    <div id="header" class="grid_12" style="background : url(img/login.png) no-repeat; background-size: 100%; height: 900px;" > 

<form> 
     <div id="fieldLogin1"> 
      <input type="text" id='req1' name="userName" style="width:530px; height:44px" placeholder="UserName"; /><br /> 
     </div> 
      <div class="clear">&nbsp;</div> 

     <div id="fieldLogin2"> 
      <input type="text" id='req2' name="password" style="width:530px; height:44px" placeholder="Password" /> 

     </div> 
        <div class="clear">&nbsp;</div> 

     <div id="checkBoxRememberMe"> 


        <input type="checkbox" name="remember" value="rememberYes" /> <br /> 

<form> 

<input type='button' 
    onclick="notEmpty(document.getElementById('req1'), 'req2','Please Enter a Value')" 
    value='Check Field' /> 
</form> 

     </div> 



    </div> <!-- end .grid_12 --> 
    <div class="clear">&nbsp;</div> 

</form> 

</div> 
<!-- end .container_12 --> 
</body> 
</html> 

、これは問題ですか?、

ありがとうございました!

答えて

3
onclick="notEmpty(document.getElementById('req1'), 'req2','Please Enter a Value')" 
value='Check Field' /> 

は、実際にあるべきである

onclick="notEmpty(document.getElementById('req1'), document.getElementById('req2'),'Please Enter a Value')" 
value='Check Field' /> 

EDIT(@danteにより示唆):

次のコードは、読みやすくすることができる:

onclick="notEmpty('req1', 'req2', 'Please Enter a Value')" 
value='Check Field' /> 

(追記で、 ==可能な限りではなく、 ===を使用してに慣れる
function notEmpty(loginId, passwordId, helperMsg) { 
    var login = document.getElementById(loginId); 
    if (!login.value.length) { 
     alert(helperMsg); 
     login.focus(); 
     return false; 
    } 

    var password = document.getElementById(passwordId); 
    if (!password.value.length) { 
     alert(helperMsg); 
     password.focus(); 
     return false; 
    } 

    return true; 
} 

ので、あなたは0 1日にブール値を比較する(エヘン...)正常に終了しません。また少し速いです:))

+0

を...私はあなたが関数自体にbyIdのルックアップを置く提案するかもしれませんか?それはちょうどonclick = 'notEmpty( "req1"、 "req2")' ... – dante

+0

@ダンテ:良い点、私は答えを修正させてください... –

+0

@ダンテ素敵な、どのようにこれは?私、ありがとう! – MaKo

2

2番目のパラメータとして文字列をnot Emptyに渡しています。関数を呼び出すとき、あなたはあなたのパスワードフィールドにdocument.getElementById()を忘れてしまった

onclick="notEmpty(document.getElementById('req1'), document.getElementById('req2'),'Please Enter a Value')" 
2

:これを試してみてください

onclick="notEmpty(document.getElementById('req1'), document.getElementById('req2'),'Please Enter a Value')" 
関連する問題