JavaScript Form Validation - Simple Tips for Beginners

Form validation is an essential part of web development to ensure that users provide valid data. In this guide, we'll introduce you to basic form validation tips using JavaScript and provide sample code to get you started.

1. Prevent Default Form Submission

Before starting validation, it's crucial to prevent the default form submission to handle validation first:

<form id=`myForm`>
    <!-- Form fields go here -->
    <input type=`text` id=`name` placeholder=`Name` required>
    <input type=`email` id=`email` placeholder=`Email` required>
    <button type=`submit`>Submit</button>
</form>
<script>
const form = document.getElementById(`myForm`);
form.addEventListener(`submit`, function(event) {
    event.preventDefault();
    // Perform validation here
});
</script>
    

2. Access Form Fields

Access form fields by their id or name attributes:

const nameField = document.getElementById(`name`);
const emailField = document.getElementById(`email`);
    

3. Perform Validation

Validate form fields using JavaScript, such as checking if they are empty or meet specific criteria:

form.addEventListener(`submit`, function(event) {
    event.preventDefault();
    const name = nameField.value;
    const email = emailField.value;
    if (name.trim() === ``) {
        alert(`Name is required.`);
        return;
    }
    if (!isValidEmail(email)) {
        alert(`Invalid email address.`);
        return;
    }
    // Submit the form if validation passes
    form.submit();
});
function isValidEmail(email) {
    // Use a regular expression to validate the email format
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
    return emailPattern.test(email);
}
    

4. Display Validation Messages

Show validation messages to users using alert or by updating the DOM:

form.addEventListener(`submit`, function(event) {
    event.preventDefault();
    const name = nameField.value;
    const email = emailField.value;
    if (name.trim() === ``) {
        displayError(`Name is required.`, nameField);
        return;
    }
    if (!isValidEmail(email)) {
        displayError(`Invalid email address.`, emailField);
        return;
    }
    // Submit the form if validation passes
    form.submit();
});
function displayError(message, field) {
    const errorDiv = document.createElement(`div`);
    errorDiv.classList.add(`error-message`);
    errorDiv.textContent = message;
    field.parentNode.appendChild(errorDiv);
}
    

5. Remove Validation Messages

Clear validation messages when the user corrects the input:

nameField.addEventListener(`input`, function() {
    removeError(nameField);
});
emailField.addEventListener(`input`, function() {
    removeError(emailField);
});
function removeError(field) {
    const errorDiv = field.parentNode.querySelector(`.error-message`);
    if (errorDiv) {
        field.parentNode.removeChild(errorDiv);
    }
}
    

Conclusion

Form validation is essential for ensuring data accuracy in web applications. By following these basic tips and using JavaScript, you can create a more user-friendly and error-free form submission process.

Happy coding!