Solved

Limit Password field length

Posted on 2006-11-08
18
311 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

710 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