JavaScript Form Validation

Validate user input for better UX and safer data.

requiredregexerror messages

Intro
What is Form Validation?
Basic Empty Field Validation
Email Validation
Password Validation
Multiple Field Validation
Real-Time Validation
Visual Understanding
Important Tips
When to Use Form Validation
Simple Complete Example
Interview Q&A
MCQ

JavaScript Form Validation Tutorial (Beginner -> Practical)

Form validation ensures users enter correct and complete data before submission. It improves data quality and user experience by catching errors early.

1. What is Form Validation?

Validation checks inputs like empty fields, email format, password strength, and number limits. You can validate using JavaScript before sending data to the server.

2. Basic Example (Check Empty Field)

<form onsubmit="return validateForm()">
    <input type="text" id="username" placeholder="Enter username">
    <p id="error" style="color:red;"></p>
    <button type="submit">Submit</button>
</form>

<script>
function validateForm() {
    let user = document.getElementById("username").value;

    if (user === "") {
        document.getElementById("error").innerText = "Username is required";
        return false; // stop submission
    }
    return true;
}
</script>

3. Email Validation

<input type="text" id="email" placeholder="Enter email">
<button onclick="validateEmail()">Check</button>
<p id="msg"></p>

<script>
function validateEmail() {
    let email = document.getElementById("email").value;
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

    if (pattern.test(email)) {
        document.getElementById("msg").innerText = "Valid Email";
    } else {
        document.getElementById("msg").innerText = "Invalid Email";
    }
}
</script>

4. Password Validation

<input type="password" id="pass" placeholder="Enter password">
<button onclick="checkPassword()">Check</button>
<p id="result"></p>

<script>
function checkPassword() {
    let pass = document.getElementById("pass").value;

    if (pass.length < 6) {
        document.getElementById("result").innerText = "Password too short";
    } else {
        document.getElementById("result").innerText = "Valid Password";
    }
}
</script>

5. Multiple Field Validation

<form onsubmit="return validate()">
    <input type="text" id="name" placeholder="Name"><br>
    <input type="text" id="email"><br>
    <input type="password" id="password"><br>
    <p id="error"></p>
    <button type="submit">Submit</button>
</form>

<script>
function validate() {
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let pass = document.getElementById("password").value;

    if (name === "" || email === "" || pass === "") {
        document.getElementById("error").innerText = "All fields are required";
        return false;
    }
    return true;
}
</script>

6. Real-Time Validation (Better UX)

<input type="text" id="username">
<p id="msg"></p>

<script>
document.getElementById("username").addEventListener("keyup", function() {
    let value = this.value;

    if (value.length < 3) {
        document.getElementById("msg").innerText = "Min 3 characters required";
    } else {
        document.getElementById("msg").innerText = "Looks good";
    }
});
</script>

7. Visual Understanding

Validation flow is simple: Input -> Rule Check -> Error or Success Message -> Submit/Block.

8. Important Tips

Prevent form submission with return false or e.preventDefault() when invalid.
Use regex for patterns like email or phone.
Show clear, user-friendly error messages.
Validate on both frontend and backend.

9. When to Use Form Validation

Use validation in login, registration, contact, and payment forms.

10. Simple Complete Example

<form id="form">
    <input type="text" id="name" placeholder="Name">
    <button type="submit">Submit</button>
    <p id="msg"></p>
</form>

<script>
document.getElementById("form").addEventListener("submit", function(e) {
    let name = document.getElementById("name").value;

    if (name === "") {
        e.preventDefault();
        document.getElementById("msg").innerText = "Name required";
    }
});
</script>