JavaScript Form Validation (original) (raw)

Last Updated : 09 Jan, 2025

JavaScript form validation checks user input before submitting the form to ensure it's correct. It helps catch errors and improves the user experience.

What we are going to Create

In this article, we will guide you through creating a form validation application. This application will validate essential fields such as firstName, lastName, userName, email, and password. We will explore two different approaches for form validation

• **Using Conditional Logic: This approach involves using if-else conditions to validate the input based on simple rules.
• **Using Regular Expressions (Regex): A more advanced approach where patterns are matched for validating inputs such as emails, passwords, and usernames.

Approach 1: Using Conditional Logic

This validates a registration form by ensuring that all required fields are filled out correctly. It checks the name, email, password, course selection, and agreement checkbox, displaying error messages for any invalid input. If all fields pass validation, the form is submitted successfully; otherwise, submission is prevented.

JavaScript `

function validateForm() { const name = document.getElementById("name").value; const addr = document.getElementById("address").value; const email = document.getElementById("email").value; const pass = document.getElementById("password").value; const sub = document.getElementById("subject").value; const agree = document.getElementById("agree").checked;

const nameErr = document.getElementById("name-error");
const addrErr = document.getElementById("address-error");
const emailErr = document.getElementById("email-error");
const passErr = document.getElementById("password-error");
const subErr = document.getElementById("subject-error");
const agreeErr = document.getElementById("agree-error");

nameErr.textContent = "";
addrErr.textContent = "";
emailErr.textContent = "";
passErr.textContent = "";
subErr.textContent = "";
agreeErr.textContent = "";

let isValid = true;

if (name === "" || /\d/.test(name)) {
    nameErr.textContent = "Please enter your name properly.";
    isValid = false;
}

if (addr === "") {
    addrErr.textContent = "Please enter your address.";
    isValid = false;
}

if (email === "" || !email.includes("@") || !email.includes(".")) {
    emailErr.textContent = "Please enter a valid email address.";
    isValid = false;
}

if (pass === "" || pass.length < 6) {
    passErr.textContent = "Please enter a password with at least 6 characters.";
    isValid = false;
}

if (sub === "") {
    subErr.textContent = "Please select your course.";
    isValid = false;
}

if (!agree) {
    agreeErr.textContent = "Please agree to the above information.";
    isValid = false;
}

if (isValid) {
    alert("Form submitted successfully!");
    return true;
}
else {
    return false;
}

}

function resetErrors() { document.getElementById("name-error").textContent = ""; document.getElementById("address-error").textContent = ""; document.getElementById("email-error").textContent = ""; document.getElementById("password-error").textContent = ""; document.getElementById("subject-error").textContent = ""; document.getElementById("agree-error").textContent = ""; }

`

• Form Validation :The validateForm() function checks if the form fields (name, address, email, etc.) are filled out correctly before submission.
• **Error Display :If any field is invalid, an error message is shown next to it, guiding the user to correct the issue.
• **Prevents Submission on Error :If any field is invalid, the form submission is blocked, preventing incomplete data from being sent.
• **Clear Errors on Reset :The resetErrors() function clears all error messages when the form is reset.
• **Organized Code :The code is divided into two functions (validateForm() and resetErrors()), ensuring clarity and easy maintenance.

Implementation with HTML and CSS

HTML `

REGISTRATION FORM

Name:

Address:

E-mail Address:

Password:

Select Your Course:

College Name:

I agree to the above information