How use javascript serial number?
This should do it:
Since you are working with a nearly alphanumeric alphabet, a If you're curious: The problem we want to solveLet’s start with a definition of user experience according to Wikipedia :
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. RequirementsIn 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 numbersWe just need to test the entered number with the provided pattern.
Another approachAnd 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:
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:
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.
That’s it, now we have a real-time validation.
Note: padEnd is introduced in the ES 2017 specification. A polyfill is also available if targeted browsers are not supporting that function. ConclusionIt 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. |