Building Interactive Forms with DOM Manipulation and Validation in JavaScript

Forms are an essential part of any web application as they allow users to input information that can be processed by the server. In this tutorial, we’ll show you how to use JavaScript to create dynamic and interactive forms with validation.

Getting started

The first step is to create an HTML form with input fields for the user to enter data. We’ll be using JavaScript to manipulate the DOM (Document Object Model) to add functionality to the form in real time.

Let’s start with a simple form that contains a name input field, an email input field, and a button:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

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

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

Next, we’ll add JavaScript to validate the form and prevent it from submitting if the input is invalid.

DOM Manipulation

DOM manipulation is the process of changing the HTML document structure or content using JavaScript. In this case, we’ll use it to display error messages dynamically when the user inputs invalid data.

First, we’ll add a div element at the top of the form to display the error message:

<form>
    <div id="error-message"></div>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

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

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

Then, we’ll use JavaScript to select the form element and add an event listener to it. The event we’ll be listening to is the “submit” event, which is triggered when the user clicks the submit button:

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
    event.preventDefault(); // prevent form from submitting

    // validate the form
});

Next, we’ll need to validate the form. For this example, we’ll be checking if the name and email fields are empty. If either of them is empty, we’ll display an error message:

const form = document.querySelector('form');
const errorMessage = document.querySelector('#error-message');

form.addEventListener('submit', (event) => {
    event.preventDefault(); // prevent form from submitting

    // validate the form
    if (name.value === '' || email.value === '') {
        errorMessage.innerHTML = 'Please fill out all fields';
    } else {
        errorMessage.innerHTML = '';
        form.submit();
    }
});

In this example, we’re selecting the name and email input fields using their IDs and checking if their values are empty. If either of them is empty, we’re setting the error message text to “Please fill out all fields”. If both fields are filled out, we’re clearing the error message text and allowing the form to submit.

Validation

There are many ways to implement form validation in JavaScript, but for the sake of simplicity, we’ll be using the HTML5 validation attributes.

These attributes include “required” to require a field to be filled out and “pattern” to require a field to match a specific pattern. For example, we can use the “pattern” attribute to require the email field to be a valid email address:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

With this pattern, we’re requiring the email field to have a valid email format, such as “example@example.com”.

Conclusion

By using DOM manipulation and validation techniques in JavaScript, we can create interactive and dynamic forms that provide a better user experience. In this tutorial, we covered the basics of form validation and showed you how to implement it in a simple example.

There are many other advanced techniques and libraries available to create even more complex forms, but this should give you a solid foundation to build on.