Solved

Limit Password field length

Posted on 2006-11-08
18
304 Views
Last Modified: 2008-02-01
hi there,

Can someone create a little js script I can use on my signup page which limits the password field
to alphanumeric characters only (no special characters), and also limits the length of the password?

Ideally, if for example I want a limit of 6 characters for te password field and then user tries to enter
more than 6, then an alert box would appear telling him to re-enter because password is too long.

ANd, when he clicks OK button on alert box, the password fields hould be cleared.

Thanks!
0
Comment
Question by:cbradstreet
  • 7
  • 5
  • 3
  • +2
18 Comments
 
LVL 12

Expert Comment

by:netsmithcentral
ID: 17901225
function pwdChk(obj){
    if(!obj.value.match(/^\w{1,6}$/)){
        alert('Please enter an alphanumeric password, 1 to 6 characters in length.');
        obj.value = '';
        return false;
    } else return true;
}
0
 
LVL 12

Expert Comment

by:netsmithcentral
ID: 17901232
<form onsubmit="pwdChk(this);"><input type="password"><input type="submit" value="submit"></form>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17901245
cbradstreet,

I'm not sure if there will be some issue with this being a password input field, if it is set up as one.  Add the function below to the head section of your page in script tags (type javascript).

function verifyPass(password) {
  if (password.value.length > 6) {
    alert("Password is too long");
    this.focus();
    return false;
  }
  if (!password.value.match(/^\w$/)) {
    alert("Invalid characters in password");
    this.focus();
    return false;
  }
  return true;
}

Then call the function with an event like onblur in the input field.  The way it is set up now it will expect you to pass "this" to the function.

  <input type="password" name="pass" onblur="return verifyPass(this);">

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17901344
That goes like this:

<input type="password" name="userpwd" size="6" maxlength="6" onKeyUp="if(this.value.match(/\W/)this.value=this.value.replace(/\W/g,'');" >


0
 

Author Comment

by:cbradstreet
ID: 17901346
netsmithcentral, when I submit I get 'value' is null or not an object

b0lsc0tt, no matter what I enter in your input field, I always get error "Invalid characters in password"
and field is not cleared
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17901742
Zvonko's regular expression is a better way to do what I had in that second If.  The line below should work better.

  if (password.value.match(/\W/)) {

I missed the part where you wanted the field to be cleared.  Add the line below to the code above each line for this.focus().

    this.value='';

Let me know if you have any questions.

bol
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17902248
Now I se that I have a typo in my proposal.
Check better this:


<input type="password" name="userpwd" size="6" maxlength="6" onKeyUp="if(this.value.match(/\W/))this.value=this.value.replace(/\W/g,'');" >




0
 

Author Comment

by:cbradstreet
ID: 17902375
Okay, here's what I ended up with:

<html>
<head>
      <title>Untitled</title>
</head>

<script>
function verifyPass(password) {
if (password.value.length > 6) {
alert("Password is too long");
this.value='';
this.focus();
return false;
}
if (password.value.match(/\W/)) {
alert("Invalid characters in password");
this.value='';
this.focus();
return false;
}
return true;
}
</script>

<body>

<form>
<input type="password" name="userpwd" size="6" maxlength="6" onKeyUp="if(this.value.match(/\W/)this.value=this.value.replace(/\W/g,'');" ><input type="submit" value="submit">
</form>

</body>
</html>

But I get a minor error ...
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17902405
The if-statement and the match method need both a closing brace. You have only one brace I misstyped in my first comment.

Check this alone:

<input type="password" name="userpwd" size="6" maxlength="6" onKeyUp="if(this.value.match(/\W/))this.value=this.value.replace(/\W/g,'');" >

0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17902462
With Zvonko's input tag you do not need, or even use, the function I provided and you can remove it from the script block in the head of the page.  There was one other mistake although it probably would not have been a problem.   When I used this in the function it should have been password.

bol
0
 

Author Comment

by:cbradstreet
ID: 17903046
Okay, getting there ... ;-)

Right now though the script doesn't display any error messages if I enter a special character (it just clears the field - but should first display error message and then clear field) or if I enter more than 6 characters.

Also, I need to remove the maxlength="6" because this could cause the user to think he entered something like "secretpass" but really we've only saved "secretp" because the script only accepted the first 6 (but the user won't know that unless we tell him).

Thanks for all your great work and speedy responses guys!
0
 

Author Comment

by:cbradstreet
ID: 17904275
anyone there? ;-)
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17904451
Yeah, but just for a few minutes.  Zvonko's method does not provide a message so that is why you didn't get one.  Since it works on the keyup event it is probably better without the message.  My method will provide a message and tests for 6 character max in the script.  If you want  to try using it instead then it may be just what you want.  Don't forget to include the corrections I mentioned in later comments.  I will be on for a little while longer and can help you modify Zvonko's if you want.  Otherwise Zvonko will most likely be on in a few hours (i.e. tomorrow?).

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17904467
My corrected function would be ...

function verifyPass(password) {
  if (password.value.length > 6) {
    alert("Password is too long");
    password.focus();
    return false;
  }
  if (password.value.match(/\W/)) {
    alert("Invalid characters in password");
    password.focus();
    return false;
  }
  return true;
}
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 17906037
Password :


<input type="password" maxlength="6" size="6"
onblur="if( this.value.length < this.maxLength) { alert ('Password has to be minimum ' + this.maxlength + ' Characters  Long'); }" >
0
 

Author Comment

by:cbradstreet
ID: 17908207
b0lsc0tt, thanks for you help (and patience!) with all of this. ;-)

Your latest function is *exactly* what I was looking for ... just one thing - the field isn't cleared *after* the error message appears.

Can you add this to the code I have below please?

<html>
<head>
      <title>Untitled</title>
</head>

<script>
function verifyPass(password) {
  if (password.value.length > 6) {
    alert("Password is too long");
      this.value='';
    password.focus();
    return false;
  }
  if (password.value.match(/\W/)) {
    alert("Invalid characters in password");
      this.value='';
    password.focus();
    return false;
  }
  return true;
}
</script>

<body>

Password: <input type="password" name="pass" onblur="return verifyPass(this);"><br>
Some other field: <input type="text">

</body>
</html>
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 150 total points
ID: 17908231
The problem is the "this" instead of password.  I just copied a block of it and made the correction below.

    alert("Password is too long");
     password.value='';
    password.focus();
    return false;
  }
  if (password.value.match(/\W/)) {
    alert("Invalid characters in password");
     password.value='';
    password.focus();
    return false;

Let me know if there is anything else or you have a question.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17911006
I'm glad that I could help you.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now