CODEWITHSUNDEEP
javascripthtml
William Awad
William Awad

Reputation: 23

checking if a string follows a given pattern in javascript

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

Upvotes: 0

Views: 1778

Answers (4)

Akash Shrivastava
Akash Shrivastava

Reputation: 1365

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";
}

Upvotes: 2

thgaskell
thgaskell

Reputation: 13236

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}$">

Upvotes: 0

Mehul Rudatala
Mehul Rudatala

Reputation: 401

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"));

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370979

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

Upvotes: 4

Related Questions