JS check if two textfields are not empty

Question

I have two textfields in HTML, when a button is clicked, I need to check that they are not empty.

but I have one working , my second one is not working,

here the code :

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

I have tried

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

as well, but not working either, is this the problem?,

Thanks a lot!

Alexander Pavlov · Accepted Answer · 2012-05-07 12:01:38Z

3

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

should actually be

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

EDIT (suggested by @dante):

The following code can be more readable:

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

and

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;
}

(On a sidenote, get used to using === rather than == whenever possible, so you don't end up successfully (ahem...) comparing a boolean value to 0 one day. It is also a bit faster :))

edited May 7, 2012 at 12:01

answered May 7, 2012 at 11:54

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dante Over a year ago

... might I suggest you put the byId lookup in the function itself? then it would just be onclick='notEmpty("req1", "req2")' ...

manuelBetancurt Over a year ago

@AlexanderPavlov, please edit so i see what dante means, I will check as correct answer thanks!

Dennis · Accepted Answer · 2012-05-07 11:54:45Z

2

You are passing a string as the second parameter to not Empty. Try this:

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

answered May 7, 2012 at 11:54

Dennis

14.5k4 gold badges37 silver badges56 bronze badges

Comments

sp00m · Accepted Answer · 2012-05-07 11:55:10Z

2

You forgot document.getElementById() on your password field when you call the function:

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

answered May 7, 2012 at 11:55

sp00m

49k31 gold badges152 silver badges263 bronze badges

Collectives™ on Stack Overflow

JS check if two textfields are not empty

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related