Skip to content

14 - Form Validation in JavaScript.md

Latest commit

 

History

History
476 lines (294 loc) · 6.37 KB

14 - Form Validation in JavaScript.md

File metadata and controls

476 lines (294 loc) · 6.37 KB
Raw

Form Validation in JavaScript

Introduction

Form Validation is the process of checking whether the data entered by a user in a form is correct before submitting it to the server.

JavaScript performs Client-Side Validation, which means the validation happens inside the browser before the form data reaches the server.

Why Form Validation is Used

Form Validation is used to:

  1. Prevent empty input fields.
  2. Ensure correct data format.
  3. Improve user experience.
  4. Reduce unnecessary server requests.
  5. Display immediate error messages.
  6. Improve data accuracy.

Types of Validation

1. Client-Side Validation

  • Performed by JavaScript.
  • Executed inside the browser.
  • Faster validation.
  • Reduces server load.

2. Server-Side Validation

  • Performed by server-side languages.

  • Examples:

    • Java
    • Python
    • PHP
    • Node.js

First Name Validation Program

File Name

firstname.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>First Name Validation</title>

    <script>

        function validate(){

            var res = document.getElementById("fname").value;

            if(res==""){

                document.getElementById("msg").innerHTML =
                "First Name is Required";

                return false;

            }

            else if(res.length < 3){

                document.getElementById("msg").innerHTML =
                "First Name must contain minimum 3 characters";

                return false;

            }

            else if(res.length > 8){

                document.getElementById("msg").innerHTML =
                "First Name must contain maximum 8 characters";

                return false;

            }

            else{

                return true;

            }

        }

    </script>

</head>

<body>

<form onsubmit="return validate()">

    <label>First Name</label>

    <input type="text"
           id="fname"
           name="fname">

    <span id="msg"
          style="color:red"></span>

    <br><br>

    <input type="submit"
           value="Submit">

</form>

</body>
</html>

Output

Case 1: Empty Input

First Name is Required

Case 2: Less than 3 Characters

Input:

Jo

Output:

First Name must contain minimum 3 characters

Case 3: Greater than 8 Characters

Input:

Christopher

Output:

First Name must contain maximum 8 characters

Case 4: Valid Input

Input:

Basha

Output:

Form Submitted Successfully

Step-by-Step Explanation

Step 1

function validate()

Creates a function named validate().

This function executes when the form is submitted.

Step 2

var res =
document.getElementById("fname").value;
  • Retrieves the input value.
  • Stores it in variable res.

Example:

Basha

Step 3

if(res=="")

Checks whether the input field is empty.

If true:

document.getElementById("msg").innerHTML =
"First Name is Required";

Displays:

First Name is Required

Step 4

else if(res.length<3)

Checks whether the name length is less than 3.

Example:

Jo

Length:

2

Result:

First Name must contain minimum 3 characters

Step 5

else if(res.length>8)

Checks if the entered name exceeds 8 characters.

Example:

Christopher

Result:

First Name must contain maximum 8 characters

Step 6

return false;

Stops the form submission.

The browser remains on the same page.

Step 7

return true;

Allows the form to submit successfully.

Understanding onsubmit Event

Syntax

<form onsubmit="return validate()">

Explanation:

  • User clicks Submit button.
  • validate() function is executed.
  • If:
return true

Form submits.

If:

return false

Form submission stops.

Common DOM Methods Used

1. getElementById()

Selects an HTML element using id.

Example:

document.getElementById("fname")

2. value

Returns the value entered by the user.

Example:

document.getElementById("fname").value

3. innerHTML

Changes HTML content dynamically.

Example:

document.getElementById("msg").innerHTML =
"Error Message";

More Real-Time Validation Examples

JavaScript Form Validation is used for:

  1. First Name Validation
  2. Last Name Validation
  3. Email Validation
  4. Password Validation
  5. Confirm Password Validation
  6. Mobile Number Validation
  7. PAN Card Validation
  8. Aadhaar Validation
  9. Username Validation
  10. Date of Birth Validation

Interview Questions

Q1. What is Form Validation?

Answer:

Form Validation is the process of checking user input before submitting it to the server.

Q2. What is Client-Side Validation?

Answer:

Validation performed in the browser using JavaScript is called Client-Side Validation.

Q3. What is the use of return false?

Answer:

return false prevents the form from submitting.

Q4. Which event is commonly used for form validation?

Answer:

onsubmit

Q5. Which DOM method is used to access HTML elements?

Answer:

document.getElementById()

Q6. What property is used to get user input?

Answer:

value

Example:

document.getElementById("fname").value

Important Points

  1. Form Validation improves user experience.
  2. JavaScript performs Client-Side Validation.
  3. onsubmit is commonly used for validating forms.
  4. return false stops form submission.
  5. return true allows form submission.
  6. getElementById() accesses HTML elements.
  7. innerHTML displays dynamic messages.
  8. Validation reduces invalid data sent to the server.

Summary

Form Validation is one of the most important applications of JavaScript. It helps developers validate user input before submission, provide instant feedback, improve data quality, and reduce server processing. JavaScript Form Validation is widely used in registration forms, login pages, payment systems, and enterprise web applications, making it a very important topic for both real-world development and technical interviews.