Introduction

In this lesson, we look at:

  • Regular expressions.
  • Preventing the default behaviour of forms.
  • Simple form validation.

Regular expressions

Regular expressions are used to match patterns. We place the pattern in between two forward slashes / /.

We can use the test() method to see if there is a match between a regular expression and a string. The return value is a boolean value.

The below will test if there is a match between the regular expression /hello/ and the string “Oh hello there”. In other words, does the string contain the characters hello?

const stringToTest = "Oh hello there";
// the expression is placed between / /
const expression = /hello/;
const result = expression.test(stringToTest);
console.log(result);
// true

Everyday use for regular expressions is to test if form input values match a specific pattern, e.g., if a value looks like an email address.

The function below could be used to test if the argument passed in looks like an email address:

function validateEmail(email) {
  const regEx = /\S+@\S+\.\S+/;
  const patternMatches = regEx.test(email);
  return patternMatches;
}

If the argument looks like an email address, this function will return true and false if it doesn’t.

You will not often have to create your own regular expressions. You can see in the regex example above that they can be challenging to read. Most of the time, you can find regular expressions on the Internet to test for patterns, e.g., is a phone number in a particular format or is a password complicated enough.

READ

Article: Top 15 commonly used regex for a list of common regular expressions.

Preventing default form behaviour

To prevent the default behaviour of submitted forms, which includes reloading the page, we can use:

event.preventDefault();

Code from the video.

Simple form validation

We’re going to use the trim() method and the length property to help us add simple validation to a form.

Code from the video.

Lesson Task

Brief

There are practise questions in the master branch of this repo.

Attempt to answer the questions before checking them against the answers branch of the repo.

Tags: