checking if a string follows a given pattern in javascript

Question

I am still new to javascript and I am trying to validate my form. One of my inputs is a text input for an identity number that follows the following pattern: ####XX where # represents a number and X represents a capital letter from A-Z.

Here is my code so far:

var IDnum = document.getElementById('identityNumber').value;
if (  (isNaN(IDnum.charAt(0)))  && (isNaN(IDnum.charAt(1)))&& (isNaN(IDnum.charAt(2))) && (isNaN(IDnum.charAt(3))) && (!isNaN(IDnum.charAt(4))) )
{
    document.getElementById('identityError').style.display = "inline-block";
}
else
{
    document.getElementById('identityError').style.display = "none";
}

I have tried to google it and have seen some info where they use a RegExp however i have yet to learn anything like that.

With my code above, no matter what i type it, it still validates it. Any ideas what i am doing wrong and if there is a more simple and easier way?

EDIT: after looking to regex and similar answers the following

^\d{4}[A-Z]{2}$

did not work either

X represents a character. What characters are allowed there? — CertainPerformance
– CertainPerformance, Commented Dec 18, 2019 at 10:28
Suggest you learn RegEx. It is very powerful. You can start here developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — yogZ
– yogZ, Commented Dec 18, 2019 at 10:30

CertainPerformance · Accepted Answer · 2019-12-18 10:32:28Z

4

A regular expression is the way to go here. Use the pattern ^\d{4}[A-Z]$:

document.querySelector('button').addEventListener('click', (e) => {
  const { value } = document.querySelector('input');
  if (value.match(/^\d{4}[A-Z]$/)) {
    console.log('OK');
  } else {
    console.log('Bad');
  }
});

<input>
<button>submit</button>

^\d{4}[A-Z]$ means:

^ - Match the start of the string

\d{4} - Match a digit character (0 to 9) 4 times

[A-Z] - Match a character from A to Z

$ - Match the end of the string

answered Dec 18, 2019 at 10:32

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CertainPerformance Over a year ago

The answer you accepted permits inputs like ABCD1234ABCD, which probably isn't desirable - you do need the ^ and $ anchors, like in my answer

Akash Shrivastava Over a year ago

yes, thanks @CaptainPerformance, I missed that, updated my answer.

Akash Shrivastava · Accepted Answer · 2019-12-18 11:32:47Z

2

You can use regular expression to identify whether string has 4 digits before a character.

each \d represents a digit, \d\d\d\d means 4 digits (alternatively \d{4}).

followed by . means 4 digits followed by any character.

function isAllowed(str) {
  return str.match(/^\d\d\d\d.$/g) !== null 
}

console.log(isAllowed("1234X"));
console.log(isAllowed("123a"));
console.log(isAllowed("3892#"));
console.log(isAllowed("X"));

var IDnum = document.getElementById('identityNumber').value;
if (isAllowed(IDnum))
{
    document.getElementById('identityError').style.display = "inline-block";
}
else
{
    document.getElementById('identityError').style.display = "none";
}

edited Dec 18, 2019 at 11:32

answered Dec 18, 2019 at 10:31

Akash Shrivastava

1,3659 silver badges16 bronze badges

2 Comments

William Awad Over a year ago

when i type in 12345 it validates.

Akash Shrivastava Over a year ago

yeah technically digit is also a char, but use /\d}{4}[A-Z]/ for that as above answer, but that'll ignore all special chars, check out RegEx docs for more specific cases.

Mehul Rudatala · Accepted Answer · 2019-12-18 10:37:52Z

0

function RegexCheck(str) {
  var pettern = new RegExp('^[0-9]{4,}[A-Z]{1,}');
  return pettern.test(str);
}

console.log(RegexCheck("####X"));
console.log(RegexCheck("1234A"));
console.log(RegexCheck("2C35B"));
console.log(RegexCheck("A698C"));
console.log(RegexCheck("1698b"));

answered Dec 18, 2019 at 10:37

Mehul Rudatala

4113 silver badges8 bronze badges

Comments

thgaskell · Accepted Answer · 2019-12-18 10:48:58Z

0

You can use the pattern attribute to provide a RegExp string:

^\d{4}[A-Z]{2}$ would be a string consisting of 4 digits followed by two capital letters between A and Z.

Explanation

^: Beginning of the string.

\d{4}: Exactly 4 digits in a row (this could also be written as \d\d\d\d)

[A-Z]{2}: Exactly 2 characters from the range of character between A and Z (alternatively [A-Z][A-Z]).

$: The end of the string.

input:invalid {
  color: red;
}

input:not(:invalid) {
  color: green;
}

<input type="text" pattern="^\d{4}[A-Z]{2}$">

edited Dec 18, 2019 at 10:48

answered Dec 18, 2019 at 10:40

thgaskell

13.3k5 gold badges34 silver badges39 bronze badges

Collectives™ on Stack Overflow

checking if a string follows a given pattern in javascript

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related