JavaScript Validation – Direct Functions & Form Submission

JavaScript Validation – Direct & Form Submit

This post demonstrates how to validate user input using JavaScript in two ways:

Directly when a button is clicked (without form submission)
During form submission

We’ll use HTML attributes like required along with JavaScript functions for extra checks.

1️⃣ Direct Validation (No Form Submission)

JavaScript Direct Function Validation (No Form)


// This example validates inputs when a button is clicked, without submitting a form

// HTML elements:
// - Name (text), Email (text), Age (number)
// - Button to trigger validation

// JavaScript function 'validateDirect' checks all fields and shows errors

// HTML CODE
<input type="text" id="name" placeholder="Enter Name"> <br>
<input type="email" id="email" placeholder="Enter Email"> <br>
<input type="number" id="age" placeholder="Enter Age"> <br>
<button onclick="validateDirect()">Check Validation</button>

<script>
function validateDirect() {
    // Get the values from inputs
    let name = document.getElementById("name").value.trim();
    let email = document.getElementById("email").value.trim();
    let age = document.getElementById("age").value.trim();

    // Check if name is empty
    if (name === "") {
        alert("Name is required");
        return; // Stop function here
    }

    // Check if email is empty OR invalid format
    let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
    if (email === "" || !email.match(emailPattern)) {
        alert("Valid email is required");
        return;
    }

    // Check if age is empty OR less than 18
    if (age === "" || isNaN(age) || age < 18) {
        alert("Age must be a number and at least 18");
        return;
    }

    // If all checks pass
    alert("All fields are valid ✅");
}
</script>

Username (min 3 chars):

Email:

Age (18+):

2️⃣ Form Validation on Submit

JavaScript Validation on Form Submission


// This example validates inputs when the form is submitted

// HTML elements:
// - Username (text), Password (password), Gender (radio), Country (select), Terms (checkbox)
// - Submit button triggers the validateForm function

// HTML CODE
<form onsubmit="return validateForm()">
    <input type="text" id="username" placeholder="Username" required> <br>

    <input type="password" id="password" placeholder="Password" required> <br>

    Gender:
    <input type="radio" name="gender" value="Male"> Male
    <input type="radio" name="gender" value="Female"> Female <br>

    Country:
    <select id="country" required>
        <option value="">--Select--</option>
        <option value="India">India</option>
        <option value="USA">USA</option>
    </select> <br>

    <input type="checkbox" id="terms"> I agree to terms <br>

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

<script>
function validateForm() {
    // Get username and password
    let username = document.getElementById("username").value.trim();
    let password = document.getElementById("password").value.trim();

    // Get gender
    let gender = document.querySelector('input[name="gender"]:checked');

    // Get country
    let country = document.getElementById("country").value;

    // Get terms checkbox
    let terms = document.getElementById("terms").checked;

    // Username check
    if (username.length < 3) {
        alert("Username must be at least 3 characters");
        return false;
    }

    // Password check
    if (password.length < 6) {
        alert("Password must be at least 6 characters");
        return false;
    }

    // Gender check
    if (!gender) {
        alert("Please select your gender");
        return false;
    }

    // Country check
    if (country === "") {
        alert("Please select your country");
        return false;
    }

    // Terms check
    if (!terms) {
        alert("You must agree to the terms");
        return false;
    }

    // All checks passed
    alert("Form submitted successfully ✅");
    return true; // Allow form submission
}
</script>