The sexy expressions between the slashes

by ben tryon
 
Form Validation is that part of a form or webpage that says "no, your password must have a plus, asterisk, capital letter or kitchen sink to be a valid password". 

Form validation takes any form… such as validating an ISBN to search for a book.  ISBNs are either 13 or 10 alpha-numeric characters that identify a book.
 
When this search occurs, a few behind-the-scenes actions are taking place:
First, the data controls of the form are taken into account.  In other words, the controls that determine the text-boxes have text, that the radio buttons are clicked, that the checkboxes are marked, etc.  
 
If these controls are exactly entered, this is a quick action. If incorrect, the ghost in the machine appears and everything slows down: forms are rejected by the server, travel back to the client and the process starts over.
 
Client-side is defined as processes within the browser. Client-side validation checks of form data determine if entered data is exactly correct within the application constrains.  If so, that data is allowed to be saved on the server and server-database when it reaches there.( That process is not part of this article scope. )
 
Regular expressions are the lynchpin of form validation. Why? Because “RegExp” allow code within the code to work and thus, truly power the controls process.  A regular expression literal begins with this pattern: ‘const re = /’as in
 
const re = /ab+c/i;
 
and  between the slashes is:  /pattern/modifiers (the pattern is ab+c and the modifier is i)
 
Keeping the code between the slashes as “constant”, performance improves… if the ISBN is always the target of your backend or database search, and only the 10 values change, the other database information can be ignored, and everything is then faster:
 
const re = /isbn/;
 
To enable event better performance, use a constructor: The constructor function takes either a string or a RegExp object as its first parameter and a string of optional flags as its second parameter. These flags are modifiers.
 
const re = /ab+c/i        //regular expression literal notation again
const re = new RegExp(/ab+c/, “i”) //a constructor with a literal notation expression
const re = new RegExp(“ab+c”, “i”) //a constructor with a string {“”} pattern as the first argument
 
In general, there are three RegularExpression modifiers:
i – a global case search of all words, regardless of capitalization
g – a global search to return the specific combination (either a word or phrase or number, etc)… by the way, you can combine “i and g” for a global, case insensitive search
m – a simple, multiline search that stops after the first match and is case sensitive
 
The regex snippet below matches a 10-digit ISBN. The test() checks if the input matches the format. An error is presented if it does not match.

 

function handleChange( e ) {
…
  } else if (name === "isbn") {
    const regex = /^(97(8|9))?\d{9}(\d|X)$/;
    if (!regex.test(value)) {
      error = "Invalid ISBN format! Only 10 characters!”
    }

 
•^ indicates the start of the string
•(97(8|9))? matches the prefix for the ISBN-10 format.
•\d{9} matches the 9 digits that make up the core of the ISBN code. This can be the 10 digits of an ISBN-10 code.
•(\d|X) matches the last digit of the code. This can be either a digit or the letter "X", which is used to represent the digit “10” in ISBN-10 codes.
•$ indicates the end of the string.

Form validation is pivotal in client-side and server-side interactions. Creating and enabling validation makes for faster interactions, correct information and more complete code.