Javascript help: password checker By a.smith

By @a.smith
POSTED: 23 Aug 2011 12:28
CATEGORY: Miscellaneous

(Go to comments)

How to check if text inside a field is valid before submitting.

first we need the input field.

<form>
<table>
<tr>
<td>
<input type="password" id="password" onblur="check()" />
</td>
<td id="failed">
</td>
</tr>
</table>
</form>

For a normal input field just use <input type=text /> instead. you will see

now for the javascript.

if the input field is left empty, this script would tell the user.

<script type="text/javascript">
//this function is activated by the onblur event.
function check()
{
if (document.getElementById("password"

.value)
{
//this script is activated if the input field is empty
failed("field is empty"

;
//this activates the function called failed(reason). The value for reason Is now "field is empty" when using the function
}
else
{
//if the function isn't activated it does this instead.
success();
//this activates the function called success(). Because there is nothing between the brackets no information is returned. This is ok because no information is needed.
}
}
</script>

Now we need to make the functions and create what they do.

I will use the functions needed from above.

function success()
{
//function activated after the success() function is activated.
document.getElementById("password"

.style="background-color:green";
//this will make the text field go green if it's valid.
}
function fail(reason)
{
//function activated when the fail(reason) function is activated.
document.getElementById("password"

.style="background-color:red";
//this will make the text field go red if it's invalid.
document.getElementById("failed"

.innerHTML=reason;
//this will display the reason why it failed that was returned by the function. This is a handy method if you want to use more than one reason why the password is invalid.
}

Now here's the final code.
<html>
<head>
[color=red]function success()
{
document.getElementById("password"

.style="background-color:green";
}
function fail(reason)
{
document.getElementById("password"

.style="background-color:red";
document.getElementById("failed"

.innerHTML=reason;
}
<script type="text/javascript">
[color=blue]//this function is activated by the onblur event.
function check()
{
if (document.getElementById("password"

.value)
{
failed("field is empty"

;
}
else
{
success();
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="password" id="password" onblur="check()" />
</td>
<td id="failed">
</td>
</tr>
</table>
</form>
</body>
</html>

You can use this for things like minimising the size of the password or if you want it to require letters and numbers. If you need help with matching the php so It does the same you can ask me in comment. I will reply to everything on this blog.

But I'm new with php. so..... i'm not great.

Make sure that JavaScript is written as one word and there is no spaces in it while doing this.

+7 -12

a.smith
13 Jan 2012 15:14

Quoth Eric15:

Quoth Takis Teh Greekquote]Where did you copy paste that from?

This is a copied blog?[/quote]

No. i wrote it myself

Eric15
13 Jan 2012 15:13

Quoth Takis Teh Greek:

Where did you copy paste that from?

This is a copied blog?

a.smith
13 Jan 2012 15:00

Lol

Eric15
13 Jan 2012 14:49

Thanks For the information

a.smith
09 Jan 2012 01:09

Quoth Joseph14:

*brain explodes*

Woot! more brain power for me x]

Joseph14
09 Jan 2012 01:04

*brain explodes*

a.smith
04 Jan 2012 11:43

Lol yeah x]

a.smith
04 Jan 2012 11:43

Lol yeah x]

a.smith
25 Oct 2011 18:53

Pfft.... share this code with my friends then lol.

GO LUIGI
26 Aug 2011 01:29

-10? Why? 1+

a.smith
25 Aug 2011 11:13

I guess that can work. You would need a php code for that though as you can see JavaScript codes. Php is exactly the same but you put $ before things that store text.

a.smith
24 Aug 2011 10:06

Meh... Waste of a blog lol.

a.smith
24 Aug 2011 09:55

php is required for the login I'm just saying how to check if it is valid.

Ok I didn't close the table tag but nobody's perfect.

If you don't understand it just copy it. I don't really care. Only took me 15 mins to write up.