Implementing a simple form validation with JavaScript

Form validation is an essential feature of any web application. It helps ensure that users input the correct data in a form, improving the user experience and reducing errors. In this article, we will show you how to implement a simple form validation with JavaScript.

Step 1: Create an HTML form

To begin, create an HTML form that will be used for validation. This form should contain input fields for the required data, such as name, email, phone number, etc. Add the required attribute to each input field to make it mandatory.

<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="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" required>

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

Step 2: Create a JavaScript function for validation

Create a JavaScript function that will validate the input fields. This function will be called when the user clicks the submit button.

function validateForm() {
  // validation code goes here
}

Step 3: Retrieve the form data using JavaScript

Use JavaScript to retrieve the data entered in the input fields. This can be done using the getElementById method.

function validateForm() {
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  let phone = document.getElementById("phone").value;
}

Step 4: Validate the data

Once you have retrieved the data, validate it to ensure that it meets the required criteria. This can include checking that the name is not empty, the email is valid, and the phone number is a valid format.

function validateForm() {
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  let phone = document.getElementById("phone").value;

  if (name == "") {
    alert("Name must be filled out");
    return false;
  }

  if (email == "") {
    alert("Email must be filled out");
    return false;
  }

  if (phone == "") {
    alert("Phone must be filled out");
    return false;
  }

  if (!validateEmail(email)) {
    alert("Invalid email address");
    return false;
  }

  if (!validatePhone(phone)) {
    alert("Invalid phone number");
    return false;
  }

  return true;
}

In the code above, we have added validation checks for each input field. If the validation check fails, an alert message is displayed, and the function returns false. Otherwise, the function returns true, and the form is submitted.

Step 5: Implement email and phone validation functions

The validateEmail and validatePhone functions are used to validate the email and phone number input fields.

function validateEmail(email) {
  let re = /\S+@\S+\.\S+/;
  return re.test(email);
}

function validatePhone(phone) {
  let re = /^\d{10}$/;
  return re.test(phone);
}

In the code above, we have used regular expressions to validate the email and phone number input fields. The regular expression \S+@\S+\.\S+ is used to validate the email address format, and the regular expression ^\d{10}$ is used to validate the phone number format.

Step 6: Add event listeners for form submission

Finally, add event listeners for form submission to call the validateForm function and prevent the default form submission behavior.

function validateForm() {
  let name = document.getElementById("name").value;
  let email = document.getElementById("email").value;
  let phone = document.getElementById("phone").value;

  if (name == "") {
    alert("Name must be filled out");
    return false;
  }

  if (email == "") {
    alert("Email must be filled out");
    return false;
  }

  if (phone == "") {
    alert("Phone must be filled out");
    return false;
  }

  if (!validateEmail(email)) {
    alert("Invalid email address");
    return false;
  }

  if (!validatePhone(phone)) {
    alert("Invalid phone number");
    return false;
  }

  return true;
}

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  if (validateForm()) {
    // form submission code goes here
  }
});

In the code above, we have added an event listener for form submission that calls the validateForm function. If the function returns true, the form submission code is executed. Otherwise, the default form submission behavior is prevented.

Conclusion

Form validation is a crucial aspect of any web application. It helps ensure that the user inputs the correct data, reducing errors and improving the user experience. In this article, we have shown you how to implement a simple form validation with JavaScript. By following the steps outlined above, you can easily create a form that validates the input data and provides feedback to the user if the data is incorrect.