Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 318
  • Last Modified:

Limit Password field length

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
cbradstreet
Asked:
cbradstreet
  • 7
  • 5
  • 3
  • +2
1 Solution
 
netsmithcentralCommented:
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
 
netsmithcentralCommented:
<form onsubmit="pwdChk(this);"><input type="password"><input type="submit" value="submit"></form>
0
 
b0lsc0ttCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ZvonkoSystems architectCommented:
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
 
cbradstreetAuthor Commented:
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
 
b0lsc0ttCommented:
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
 
ZvonkoSystems architectCommented:
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
 
cbradstreetAuthor Commented:
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
 
ZvonkoSystems architectCommented:
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
 
b0lsc0ttCommented:
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
 
cbradstreetAuthor Commented:
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
 
cbradstreetAuthor Commented:
anyone there? ;-)
0
 
b0lsc0ttCommented:
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
 
b0lsc0ttCommented:
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
 
Pravin AsarCommented:
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
 
cbradstreetAuthor Commented:
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
 
b0lsc0ttCommented:
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
 
b0lsc0ttCommented:
I'm glad that I could help you.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 5
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now