HTMLHelp Forums > Password Restrictions

HTMLHelp Forums > Programming > Client-side Scripting

NFogelson

Oct 14 2009, 08:57 AM

I need to make an input field labeled "password" that turns green when all restrictions are met and turns red when they aren't. That part is fairy easy...the difficulty I'm running into is that I can't figure out how to make it restrict the way that I'm supposed to.

It needs:
-at least 2 numbers
-at least 2 lower case letters
-at least 2 upper case letters
-and between 8-32 characters long

All I've accomplished after a week of trying is it'll successfully make you enter between 8-32 characters.

Please help!!

P.S. Yes this if for a college class...so if morally you just want to point me in the right direction instead of giving me the text, I think I could live with that, although the full text would be appreciated!

pandy

Oct 14 2009, 09:50 AM

And you do this with what? JavaScript?

NFogelson

Oct 14 2009, 10:29 AM

Yes- Here's what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Password</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
<script type="text/javascript">

/*
* color = color
* background-color = backgroundColor
* font-style = fontStyle
* font-weight = fontWeight
*/

function do_submit()
{
v1=document.getElementById("id_fname");
if(v1.value.length == 0)
{
v1=document.getElementById("id_div_fname");
v1.style.backgroundColor='#ff0000';

v1=document.getElementById("id_label_fname");
v1.style.color='#000000';
}
else
{
v1=document.getElementById("id_div_fname");
v1.style.backgroundColor='#00FF00';

v1=document.getElementById("id_label_fname");
v1.style.color='#000000';
}

v1=document.getElementById("id_lname");
if(v1.value.length == 0)
{
v1=document.getElementById("id_div_lname");
v1.style.backgroundColor='#ff0000';

v1=document.getElementById("id_label_lname");
v1.style.color='#000000';
}
else
{
v1=document.getElementById("id_div_lname");
v1.style.backgroundColor='#00FF00';

v1=document.getElementById("id_label_lname");
v1.style.color='#000000';
}

v1=document.getElementById("id_email");
if(v1.value.length == 0)
{
v1=document.getElementById("id_div_email");
v1.style.backgroundColor='#ff0000';

v1=document.getElementById("id_label_email");
v1.style.color='#000000';
}
else
{
v1=document.getElementById("id_div_email");
v1.style.backgroundColor='#00FF00';

v1=document.getElementById("id_label_email");
v1.style.color='#000000';
}

v1=document.getElementById("id_password");
if(v1.value.length < 6 & v1.value.length < 32)
{
v1=document.getElementById("id_div_password");
v1.style.backgroundColor='#ff0000';

v1=document.getElementById("id_label_password");
v1.style.color='#000000';
}
else
{
v1=document.getElementById("id_div_password");
v1.style.backgroundColor='#00FF00';

v1=document.getElementById("id_label_password");
v1.style.color='#000000';
}
}

</script>
</head>
<body>
<form name="n_f1">
<div id="id_div_fname" class="container-input">
<label id="id_label_fname">First name:</label>
<input id="id_fname" type="text" value=""></input>
</div>

<div id="id_div_lname" class="container-input">
<label id="id_label_lname">Last name:</label>
<input id="id_lname" type="text" value=""></input>
</div>

<div id="id_div_email" class="container-input">
<label id="id_label_email">Email:</label>
<input id="id_email" type="text" value=""></input>
</div>

<div id="id_div_password" class="container-input">
<label id="id_label_password">Password:</label>
<input id="id_password" type="text" value=""></input>
</div>

<input id="id_submit" type="button" value="submit" onclick=do_submit()></input>
</form>
</body>
</html>

With a CSS of:

.container-input
{
font-family: sans-serif;
font-size: 1em;
width: 70%;
color: #000000;
background-color: #cccccc;
padding: 1% 2% 1% 2%;
border-style: dotted;
border-width: thin thin thin thin;
}

All of what is listed works...I just can't figure out how to enforce the restrictions for the password portion.

pandy

Oct 14 2009, 10:34 AM

I move this to the Client-side Scripting forum then.

Darin McGrew

Oct 14 2009, 11:00 AM

Right now, you're only checking document.getElementById("id_password").value.length (and you aren't checking it correctly, AFAICS). How have you tried to check whether certain characters are present in the password?

NFogelson

Oct 14 2009, 12:25 PM

Ya- I've tried but have taken them out due to them causing the function to malfunction... what I have listed above is all that I was able to get to work.

I'm not totally sure how to check specifically for certain characters or capitalized characters.

Christian J

Oct 14 2009, 03:06 PM

"Regular expressions" are often used for things like this.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.