Validate form using Regular Expression in JavaScript

Regular expressions, also known as regex, are a powerful tool used for pattern matching and string manipulation in various programming languages, including JavaScript. They provide a way to search, match, and replace patterns in text data, making it easy to perform complex operations on strings.

In JavaScript, regular expressions are represented by objects and are used primarily for string manipulation, including string matching, search, and replace operations. By using regular expressions, you can quickly and easily validate user input in forms, sanitize user input to prevent attacks, and parse text data to extract useful information. Regular expressions are an essential tool in a JavaScript developer's toolkit and can greatly simplify many common programming tasks.

To validate a form using Regular Expression in JavaScript, you can follow these steps:

1. Add an event listener to the form submit button.
2. In the event listener function, create an array of Regular Expressions that match the validation requirements for each form input.
3. Loop through the form inputs, checking each one against its corresponding Regular Expression.
4. If any input fails validation, prevent the form from submitting and display an error message.
5. If all inputs pass validation, submit the form.

Here's an example code snippet that demonstrates how to validate a form using Regular Expression in JavaScript:

<!-- Example form -->
<form id="my-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Submit</button>
</form>

// Example JavaScript code to validate the form using Regular Expression
const form = document.getElementById('my-form');
const nameRegex = /^[a-zA-Z ]{2,30}$/;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const nameInput = form.elements['name'];
  const emailInput = form.elements['email'];
  const passwordInput = form.elements['password'];

  if (!nameRegex.test(nameInput.value)) {
    alert('Please enter a valid name');
    return;
  }

  if (!emailRegex.test(emailInput.value)) {
    alert('Please enter a valid email');
    return;
  }

  if (!passwordRegex.test(passwordInput.value)) {
    alert('Please enter a valid password (must contain at least 8 characters, including 1 uppercase, 1 lowercase, and 1 number)');
    return;
  }

  form.submit();
});

In the example above, the Regular Expressions nameRegex, emailRegex, and passwordRegex are defined to match the validation requirements for each input field. The event listener function checks each input field against its corresponding Regular Expression using the test() method. If any input field fails validation, an error message is displayed and the form submission is prevented. If all input fields pass validation, the form is submitted.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂