JavaScript Form Validation

What is Form Validation?

Form validation means checking user input before submitting a form.

There are two types:

1. Client-side validation (JavaScript) → happens in browser

2. Server-side validation → happens on server

Note - We only study about Client side Validation .

JavaScript validation is used to:

• Ensure fields are not empty

• Check email format

• Check password length

• Validate numbers only

• Verify mobile number, etc.

---

Common Form Validation Methods

1.) Required Field Check

Check if input is empty.

if (name == "") { 

alert("Name is required");

 }

2.) Length Check

if (password.length < 6) {

alert("Password must be at least 6 characters");

}

3.) Number Validation

if (isNaN(age)){ 

alert("Age must be a number");

}

4.) Mobile Number Validation (10 digits)

if (mobile.length != 10 || isNaN(mobile)) {
alert("Enter valid 10-digit mobile number");
}

Question - Create a simple form and use basic Javascript Validation.

<form onsubmit="validate()">

<input type="text" id="name" placeholder="Enter Name"><br><br>
<input type="email" id="email" placeholder="Enter Email"><br><br>
<input type="text" id="mobile" placeholder="Enter Mobile"><br><br>

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

</form>

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

    if (name === "") {
        alert("Please enter your name");
    }
    else if (email === "") {
        alert("Please enter your email");
    }
    else if (mobile === "") {
        alert("Please enter your mobile number");
    }
    else {
        alert("Form submitted successfully!");
    }
}
</script>