Very Simple Validations

Form validation ensures users enter the correct data before submission. Let's build simple but effective validations.

Basic Required Field Check

function validateForm() {
    let name = document.getElementById("name").value.trim();
    let email = document.getElementById("email").value.trim();

    if (name === "") {
        alert("Name is required!");
        return false;
    }
    if (email === "") {
        alert("Email is required!");
        return false;
    }
    return true;
}

Email Validation

function isValidEmail(email) {
    // Simple check — contains @ and a dot
    return email.includes("@") && email.includes(".");
}

// Better: use a regex pattern
function isValidEmail(email) {
    let pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
}

console.log(isValidEmail("alice@example.com")); // true
console.log(isValidEmail("not-an-email"));       // false

Password Strength

function isStrongPassword(password) {
    if (password.length < 8) {
        return "Password must be at least 8 characters";
    }
    if (!/[A-Z]/.test(password)) {
        return "Password must contain an uppercase letter";
    }
    if (!/[0-9]/.test(password)) {
        return "Password must contain a number";
    }
    return ""; // No error — valid!
}

Complete Validation Example

let form = document.getElementById("signup");
let errorDiv = document.getElementById("errors");

form.addEventListener("submit", function(e) {
    e.preventDefault();
    let errors = [];

    let name = form.elements.name.value.trim();
    let email = form.elements.email.value.trim();
    let password = form.elements.password.value;

    if (name === "") errors.push("Name is required");
    if (name.length < 2) errors.push("Name must be at least 2 characters");
    if (!isValidEmail(email)) errors.push("Enter a valid email");

    let pwdError = isStrongPassword(password);
    if (pwdError) errors.push(pwdError);

    if (errors.length > 0) {
        errorDiv.innerHTML = errors.map(e => `<p>${e}</p>`).join("");
        errorDiv.style.display = "block";
    } else {
        errorDiv.style.display = "none";
        console.log("Form is valid! Submitting...");
    }
});

HTML5 Built-in Validation

<input type="text" required minlength="2">
<input type="email" required>
<input type="password" required minlength="8">

HTML5 attributes provide basic validation automatically. Combine them with JavaScript validation for the best user experience.

Congratulations! You've completed the JavaScript tutorial series. You now have a solid foundation to build interactive web pages! 🎉