How to make a validation of fields on JavaScript

Learn how to validate form fields on JavaScript w/ an example. Validate user input to ensure accuracy & functionality of web applications.

Validating Form Fields with JavaScript

Validating form fields is an important part of any web form. Validation ensures that users enter the data in the correct format, and that required fields are not left blank. JavaScript is a great tool for form validation because it allows you to write custom validation rules that can be applied to any form element. In this tutorial, we'll look at how to use JavaScript to validate form fields. We'll start by looking at the HTML for a simple form, and then use JavaScript to add validation rules.

The HTML Form

Let's start by looking at the HTML for a simple form. We'll use a <form> element to wrap our form elements:


<form id="myForm">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Email:</label>
  <input type="text" name="email">
  <button type="submit">Submit</button>
</form>

This simple form has two fields: a name field and an email field. Both fields are required, so we need to make sure that the user enters a value in both fields before submitting the form.

Adding Validation Rules

Now that we have the HTML for our form, let's add some JavaScript to validate the fields. We'll start by adding a validation function that will be called when the form is submitted:


<script>
  function validateForm() {
    // Validation code goes here
  }
</script>

Inside the validateForm() function, we can add the code to check if the fields are valid. Let's start by checking if the name field is empty:


function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  if (name == "") {
    alert("Name must be filled out");
    return false;
  }
}

In this code, we use the document.forms[] method to get a reference to the form, and then get a reference to the name field using the name attribute. We then check if the value of the field is an empty string. If it is, we show an alert and return false to indicate that the validation has failed. We can do the same thing for the email field:


function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  if (name == "") {
    alert("Name must be filled out");
    return false;
  }

  var email = document.forms["myForm"]["email"].value;
  if (email == "") {
    alert("Email must be filled out");
    return false;
  }
}

Now we have a basic form validation script that will check if the fields are filled out before submitting the form.

Adding More Rules

We can also add more complex validation rules, such as checking if the email address is valid. We can use a regular expression to check if the email address is in the correct format:


function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  if (name == "") {
    alert("Name must be filled out");
    return false;
  }

  var email = document.forms["myForm"]["email"].value;
  if (email == "") {
    alert("Email must be filled out");
    return false;
  }

  var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
  if (!emailRegex.test(email)) {
    alert("Email must be in the correct format");
    return false;
  }
}

In this code, we use a regular expression to check if the email address is in the correct format. If it isn't, we show an alert and return false to indicate that the validation has failed.

Attaching the Validation Function to the Form

Finally, we need to attach our validation function to the form. We can do this by adding an onsubmit attribute to the <form> element:


<form id="myForm" onsubmit="return validateForm()">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Email:</label>
  <input type="text" name="email">
  <button type="submit">Submit</button>
</form>

Now when the form is submitted, our validation function will be called and the form will not be submitted if the validation fails.

Conclusion

In this tutorial, we looked at how to use JavaScript to validate form fields. We started with a simple form and used JavaScript to add validation rules. We then added more complex validation rules, such as checking if the email address is in the correct format. Finally, we attached our validation function to the form so that it is called when the form is submitted.

javascript