Form Validation

The ability to restrict a user’s input or insure certain conditions are met is a crucial aspect of eCommerce. Almost any business that conducts transactions online uses some form of validation techniques via client-side JavaScript, and in doing so insures a proper format for data. Allowing the server side to process this information without fear of errors due to improper data types.

Its is especially crucial to validate your forms for security purposes. Such as restricting special characters to prevent unscrupulous people from injecting malicious JavaScript code into your forms. In the following sections we will discuss basic text input validation, as well as validating select, radio, and checkbox inputs. We’ll also briefly touch on testing a regular expression against an input value. Before we begin it is recommended you have some general knowledge on working with event listeners, and take the time to review some basic key terms below.

Comparison Operators

Comparison operators are used in logical statements to determine the equality or differences between variables or values, we will be primarily focusing on the following:

• === The "strict equal" operator returns true if the operands are equal and of the same type.
• !== The "strict not equal" operator returns true if the operands are not equal or not of the same type.
• > The "greater than" operator returns true if the left operand is greater than the right operand.
• < The "less than" operator returns true if the left operand is less than the right operand.
• >= The "greater than or equal" operator returns true if the left operand is greater than or equal to the right operand.
• <= The "less than or equal" operator returns true if the left operand is less than or equal to the right operand.

Logical Operators

Logical operators are used to determine the logic between variables or values. Such as specifying the relationship between operands in an expression that results in a Boolean value of true or false.

• && The "And" operator returns true if both the left operand and right operand return a value of true; otherwise, it returns a value of false.
• | | The "Or" operator returns true if either the left operand or right operand returns a value of true; if neither operand returns a value of true, then the expression containing the "Or" operator returns a value of false.
• ! The "Not" operator returns true if an expression is false, and returns false if an expression is true.

Falsy Values

JavaScript includes six values that are treated in comparison operations as the Boolean value false. Which are listed below. Note that all other values are the equivalent of Boolean true, and are known as truthy values.