I have a textbox for my passportcode and I want to introduce a regex to check on keydown that the passport code consist of 9 character and only my first charecter is alphabet in uppercase and the rest of characters only accepts number. i wrote sample in placeholder.

I wrote the below code but it does not work.

Is my regex wrong? Here is my code :

$(".passno").each(function(index, element) {
  $(this).bind('keydown', function(event) {
    switch (event.keyCode) {
      case 8: // Backspace
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
        break;
      default:
        var regex = new RegExp("^[A-Z0-9.,/ $@()]+$");
        var key = event.key;
        if (!regex.test(key)) {
          event.preventDefault();

          $(this).closest(".box-infoes").find(".error").css("display", "block")
          return false;
        } else {
          $(this).closest(".box-infoes").find(".error").css("display", "none")
        }
        break;
    }
  });
});

<script src=".8.3/jquery.min.js"></script>
<input type="text" class="passno" placeholder="e.g.=J12345678" />
<div class="box-infoes">
  <div style="color:red; display:none;" class="error"> This Is a Wrong passportcode !</div>
</div>

I have a textbox for my passportcode and I want to introduce a regex to check on keydown that the passport code consist of 9 character and only my first charecter is alphabet in uppercase and the rest of characters only accepts number. i wrote sample in placeholder.

I wrote the below code but it does not work.

Is my regex wrong? Here is my code :

$(".passno").each(function(index, element) {
  $(this).bind('keydown', function(event) {
    switch (event.keyCode) {
      case 8: // Backspace
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
        break;
      default:
        var regex = new RegExp("^[A-Z0-9.,/ $@()]+$");
        var key = event.key;
        if (!regex.test(key)) {
          event.preventDefault();

          $(this).closest(".box-infoes").find(".error").css("display", "block")
          return false;
        } else {
          $(this).closest(".box-infoes").find(".error").css("display", "none")
        }
        break;
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" class="passno" placeholder="e.g.=J12345678" />
<div class="box-infoes">
  <div style="color:red; display:none;" class="error"> This Is a Wrong passportcode !</div>
</div>

• javascript
• jquery
• regex

• Are you sure the issue is not in the rest of the code as well? – Adriano Commented Nov 30, 2017 at 9:40

4 Answers 4

You shouldn't be testing on the key pressed, but the resulting text box value.

You would use this regex:

var regex = new RegExp("^[A-Z][0-9]{8}$");

The reason why you shouldn't test only the pressed key is that you will not be able to determine if it is the first character or not, and won't also know if that would make the total length different than 9...

$(".passno").each(function(index, element) {
  $(this).bind('keyup', function(event) {
    var regex = new RegExp("^[A-Z][0-9]{8}$");
    var value = event.currentTarget.value;
    if (!regex.test(value)) {
      $(this).next(".box-infoes").find(".error").css("display", "block")
    } else {
      $(this).next(".box-infoes").find(".error").css("display", "none")
    }

  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" class="passno" placeholder="e.g.=J12345678" />
<div class="box-infoes">
  <div style="color:red; display:none;" class="error"> This Is a Wrong passportcode !</div>
</div>

I've simplified everything. No need to test on the keycode, since we will always just use the current value of the input. I've also changed .closest() to .next() when targeting the .box-infoes since they are not containing the input, but are siblings. Since we check on the length of the value, and it would be invalid for the first 8 characters, we cannot prevent the user's input so I removed the return false and preventDefault().

Try this:

var regex = new RegExp("^[A-Z0-9.,/ $@()]+$");

This one is faulty in the RegEx "/"

var regex = new RegExp("^[A-Z0-9.,\ $@()]+$");

But i would remend this:

var regex = new RegExp("[A-Z]{1}\d{8}");

try this

var regex = new RegExp("^[A-Z][0-9]{8}$");

will match you need.

see below, it seems like you want to remove the extra characters then check the value matches your requirements, this breaks the problem down into two functions that bine to give you the functionality you require.

// remove any not uppercase or numerical characters from the input string
const sanitizePassport = x => x.replace(/[^A-Z0-9]+/g, '')

// check that a string matches capital letter followed by 8 numbers
const validatePassport = x => /^[A-Z]\d{8}$/.test(sanitizePassport(x))

console.log(
  sanitizePassport('(@A1234 5678)')
)

console.log(
  validatePassport('(A1234 5678)') // => true
)

console.log(
  validatePassport('a12345678') // => false
)

console.log(
  validatePassport('a1234567') // => false
)

console.log(
  validatePassport('a123456789') // => false
)

<script src="https://codepen.io/synthet1c/pen/KyQQmL.js"></script>