1

Does anybody know how to make a password box like this image?

This password box will be the first page of the site/mobile. The user have to insert 4 numbers (1 - 2 - 3 - 4). If they dont type 1 -2 - 3 - 4 as their password, they will get a message box saying "wrong password". If they type correct they will be sent to the next page. Appreciate help!

Tharif
  • 13,172
  • 9
  • 51
  • 73
Charly
  • 21
  • 2
  • validate the textbox content with this regex `^1234$` – Avinash Raj May 27 '15 at 10:39
  • I would very appreciate some code if possible, because i know so little about it.. Html / javascript and how to insert regex:) – Charly May 27 '15 at 10:42
  • 1
    Are `1`, `2`, etc the actual values you want to match or are those generic place holders for digits? – npinti May 27 '15 at 10:42
  • I would like to set the actually digits 1 - 2 - 3 - 4 . Only those 4 numbers in this order should work to be sent to the next page:) @npinti – Charly May 27 '15 at 10:49

3 Answers3

1

Here a working sample

var password = [1,2,3,4];

var pwdInputs = $("#pwdContainer input");
var inputs = pwdInputs.toArray();

pwdInputs.keyup(function(){
  if (this.value.length == this.maxLength) {
    if(inputs.indexOf(this) == inputs.length-1){
      testPassword();
    } else {
      $(this).next('input').focus();
    }
  }
});

function testPassword(){
  var valid = true;
  
  for(var i=0; i<inputs.length; i++){
    if(password[i] != inputs[i].value){
      valid = false;
      break;
    }
  }
  
  if(valid){
    console.log("Correct Password!");
    window.location.href = 'http://www.google.com';
  }else{
    console.log("Wrong Password!");
  }
}
div.box-big {
  background-color: grey;
  margin: auto;
  display:inline-block;
  padding: 10px;
  padding-top: 20px;
}

input.box-text {
  width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pwdContainer" class="box-big" >
  <input type="text" maxlength="1" class="box-text" >
  <input type="text" maxlength="1" class="box-text">
  <input type="text" maxlength="1" class="box-text">
  <input type="text" maxlength="1" class="box-text">
</div>
SharpEdge
  • 1,782
  • 1
  • 9
  • 20
  • Thank you! I tried to implement it now. How can we make it so after typing the first number, the next insert field automatically will be active? Also that after typing the last number, the box came up automatically with "wrong answer" or if the right number is typed the next page will load? – Charly May 27 '15 at 11:21
  • Now it's doing what you want – SharpEdge May 27 '15 at 12:45
0

As per your comment, in the picture provided you seem to want to provide the user with 4 boxes, and in it, they would then type their password.

In this case, I do not think that you need regular expressions at all. What you need to do, in my opinion, is the following:

  1. Create the 4 password field text boxes.
  2. In the section where you check the password, simply check that the first box has a value of 1 stored in it, the second box has 2, the third has 3 and the fourth has 4.

Since you are looking for specific, entire string values, as opposed to patterns, regular expressions are not needed.

npinti
  • 50,175
  • 5
  • 67
  • 92
0

You probably want a regular expression (regex), which can be used to validate your input.

The regex string would look something like this: \d{4} or [0-9]{4}, which is basically saying match all digits (`\d' or numbers from 0-9) four times strictly, so only four digits exactly would be valid

<input type="password" pattern="[0-9]{4}" id="passcode" required onkeyup="checkIfValid()">
<p id="isValid"></p>
Community
  • 1
  • 1
Huey
  • 4,654
  • 6
  • 30
  • 43
  • Thank you! I tried to implement it now. How can we make it so after typing the first number, the next insert field automatically will be active? Also that after typing the last number, the box came up automatically with "wrong answer" or if the right number is typed the next page will load? – Charly May 27 '15 at 11:22
  • See [Auto tab to next input field when fill 4 characters](http://stackoverflow.com/questions/23888537/auto-tab-to-next-input-field-when-fill-4-characters). With regards to your second question, just add an event listener to the last input field to check all if the passcode is correct and redirect if so. – Huey May 27 '15 at 11:26