Creating a "simple" password validation field

Question

I'm trying to make a password field for a webpage. So far I have:

<form name="PasswordField" action="">
Password:
<input type="password" name="password">
<input type="button" value="Log in">
</form>

Pathetic I know. It doesn't have to be fancy, I just need it to "get" the password from the textbox and match it against the password for the page. I'm assuming I can use an if-else?

*Code for get password from textbox when the "Log in" button is pressed here*
if (password = "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}

Sadly I've been fooling with this for hours. I tried functions, too, and that didn't seem to work (for me) either.

You should look into regular expression, and you have an error in your script, should be `password == "rawr"` with the double equal sign — Ibu, Nov 01 '11 at 23:12
What specific problem are you having? You don't know how to get the value of an input box? — Ariel, Nov 01 '11 at 23:15
You cannot check your password using javascript in your page and retain any level of security because all JS is visible to anyone who wants to look. If you want security, you have to check the password from a server. — jfriend00, Nov 01 '11 at 23:16
@jfriend00 He tagged this homework, so I think it's just a learning example of forms, not a real site. — Ariel, Nov 01 '11 at 23:16
@Ariel Yup. Its just an example saying "hurray! you did it". I'm having trouble "getting" the value from the password field when the "Log In" button is pressed and from there comparing it to the real password (ie "rawr"). — mandelbug, Nov 01 '11 at 23:20
@Ariel, this is bad homework, proposed by a bad teacher. One day, the OP will try to do some password validation this way, and more sites will get hacked... — Bruno Reis, Nov 01 '11 at 23:24

Nick Rolando · Accepted Answer · 2011-11-01T23:22:16.780

If you go that route, you need to put the validation inside a function that gets called in the onclick event of your button. Also to access the password <input node in js, you can give it an id and use document.getElementById(id). Also, = is an assignment operator. Use == for comparison :)

<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>

Or an even easier way would be to pass the password DOM node as an argument to the function:

<head>
<script type="text/javascript">
function isValid(myNode){
var password = myNode.value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid(this);">
</form>

both worked beautifully. Thank you! is it ok to move the script in the head to anywhere else in the document? — mandelbug, Nov 01 '11 at 23:27
@JoshI Np! Its not necessary, but typically/traditionally you put js function definitions in the `` tag. If you need to run js outside a function, you need to place it appropriately — Nick Rolando, Nov 01 '11 at 23:35
@Shredder I don't think you should have given such a complete answer to a question marked homework. A hint, yes. But not a complete answer. — Ariel, Nov 02 '11 at 01:22

score 0 · Answer 2 · answered Nov 01 '11 at 23:15

0

Is this what you are looking for?

document.forms['PasswordField'].elements['password'].value

answered Nov 01 '11 at 23:15

Ariel

25,995
5
59
69

score 0 · Answer 3 · answered Nov 01 '11 at 23:16

I used jquery and here's my solution:

<html>
<head>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("input[name='login']").click(function() {
                var s = $("input[name='password']").val();

                if(s == "rawr") {alert('Correct!')}
                else {alert('Wrong Password')}
            });
        });
    </script>

</head>

<body>
    <form name="PasswordField" action="">
    Password:<input type="password" name="password">
        <input type="button" value="Log in" name="login">
    </form>
</body>

</html>

Creating a "simple" password validation field

3 Answers3

Linked