Real-time serial number validation with JavaScript

The problem we want to solve

Let’s start with a definition of user experience according to Wikipedia :

User experience (UX) refers to a person’s emotions and attitudes about using a particular product, system or service. It includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency.

Real-time validation is a great way to enhance UX. It’s easy to check whether some serial number is valid, i.e. whether it matches a given pattern if there is a pattern or patterns for validating a serial number. But what if we want to know after every entered character whether we are still on the right track? If I mistype the fourth character and after 20 or even more of them I press validate and find out that I’ve made a mistake somewhere, certainly it won’t make me happy. I might be angry or disappointed. Especially if I’m typing on a mobile.

Requirements

In our example, the serial number needs to start with 555, followed by two digits for the year and two digits for the number of the week. Then there are six numbers followed by four numbers or four characters `<`. The serial number ends with the letter S and a control number. For simplicity we will skip checking whether the control number is correct.

Validating serial numbers

We just need to test the entered number with the provided pattern.

function validate(serialNumber) {
  const pattern = /^(555)([0-9]{2}([0-4][0-9]|5[0-3]))([0-9]{6})([0-9]{4}|<{4})[S][0-9]$/;
  return pattern.test(serialNumber);
}

Another approach

And what if we want to know whether we are on the wrong track or not after typing the first character that is not the number 5? We cannot test that against the pattern because neither 5 nor 6 (or any other digit) will match it.

The idea is to have one default correct serial number and replace its first cypher with entered digit. If that serial number is still correct, we have a valid first cypher. After we’ve entered two cyphers, we are going to fill that value with the correct serial number and test it against the given pattern. We are going to repeat it until the maximum possible length of the serial number is reached.

In our example there are two types of serial numbers, one with only digits before the letter and control number, and another with the character `<`. Now, let’s write two placeholders:

const placeholder1 = '55500001111112222S0';
const placeholder2 = '5550000111111<<<<S0';

There are a lot of correct placeholders we can use — any digit instead of ‘1’s and ‘2’s. Just make sure it passes the predefined pattern.

Because of the two types of serial numbers, we’ll need to create two masks:

const mask1 = placeholder1.substr(serialNumber.length);
const mask2 = placeholder2.substr(serialNumber.length);

Finally, we only need to pad a partial serial number with those masks and on change input check if any of the resulting serial numbers matches given pattern.

validate(serialNumber.padEnd(19, mask1));
validate(serialNumber.padEnd(19, mask2));

That’s it, now we have a real-time validation.

function validate(serialNumber) {
  const pattern = /^(555)([0-9]{2}([0-4][0-9]|5[0-3]))([0-9]{6})([0-9]{4}|<{4})[S][0-9]$/;
  return pattern.test(serialNumber);
}

function checkIsSerialNumberValid(serialNumber) {
  if (serialNumber.length === 0) {
    return true;
  }

  const placeholder1 = '55500001111112222S0';
  const placeholder2 = '5550000111111<<<<S0';

  const mask1 = placeholder1.substr(serialNumber.length);
  const mask2 = placeholder2.substr(serialNumber.length);

  return (
    validate(serialNumber.padEnd(19, mask1)) ||
    validate(serialNumber.padEnd(19, mask2))
  );
}

Note: padEnd is introduced in the ES 2017 specification. A polyfill is also available if targeted browsers are not supporting that function.

Conclusion

It is very important that users have a great quality of experience when interacting with a specific design. One way to accomplish this is to give them feedback right away, like real-time validation. When users are filling in the registration form and while entering a password, they can see if the password fulfills requirements such as length and strength. Another example is posting a comment on social networks. When users press send, it will keep them on the same page and a new comment will appear immediately. All those neat things make the users like the software, and they will motivate them to use it again.