JavaScript Form Validation - Checking for Empty Fields

Form validation is a crucial aspect of web development, ensuring that user-submitted data meets specific criteria. In this guide, we'll focus on how to use JavaScript to check for empty fields in a form, and provide examples to illustrate the process.

HTML Form

First, create an HTML form that collects user input:

<form id=`userForm`>
    <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=`button` id=`submitButton`>Submit</button>
</form>
    

JavaScript Validation

Using JavaScript, you can check if the form fields are empty when the user attempts to submit the form:

const form = document.getElementById(`userForm`);
const nameField = document.getElementById(`name`);
const emailField = document.getElementById(`email`);
const submitButton = document.getElementById(`submitButton`);
submitButton.addEventListener(`click`, function() {
    if (nameField.value.trim() === ``) {
        alert(`Name field cannot be empty.`);
        nameField.focus();
    } else if (emailField.value.trim() === ``) {
        alert(`Email field cannot be empty.`);
        emailField.focus();
    } else {
        alert(`Form submitted successfully!`);
        // You can submit the form to a server here
    }
});
    

Validation Feedback

Provide feedback to the user by displaying alerts or error messages when validation fails. You can also set focus on the first empty field to assist the user:

if (nameField.value.trim() === ``) {
    alert(`Name field cannot be empty.`);
    nameField.focus();
}
    

Conclusion

Form validation is essential for ensuring that user input is complete and accurate. In this guide, we've demonstrated how to check for empty fields in a form using JavaScript. By customizing the validation process, you can enhance the user experience and data integrity in your web applications.

Happy coding!