How to validate input field in the HTML Form ?

Last Updated : 12 Jan, 2024

In this article, we will see how to validate form input fields using HTML. To validate the form using HTML, we will use the HTML <input> required attribute. The <input> required attribute is a Boolean attribute that is used to specify the input element that must be filled out before submitting the Form.

Data validation ensures accurate and useful user input. It checks for completed required fields, valid dates, and appropriate data types.

Required Fields: Users must fill in all mandatory fields to avoid incomplete submissions.
Date Validation: Ensures users enter dates in the correct format.
Numeric Field Text: Verifies users enter text in text fields and numeric values in numeric fields.

Validation takes place either on the server side (after data submission) or on the client side (prior to data submission).

Server-side: Done by the web server for data integrity and security.

Client-side: Performed by the browser for instant user feedback.

Syntax:

<input required>

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to validate input field in HTML Form?
    </title>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
        <h3>
            How to validate input field in HTML Form?
        </h3>
 
        <form action="#">
            <label for="fname">First Name:</label>
            <input type="text" name="fname" id="fname" required>
            <br><br>
 
            <label for="lname">Last Name:</label>
            <input type="text" name="lname" id="lname" required>
            <br><br>
 
            <label for="email">Email Id:</label>
            <input type="email" name="email" id="email" required>
            <br><br>
 
            <input type="submit" value="Submit">
        </form>
    </center>
</body>
 
</html>

Output:

Example2:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Input Field Validation</title>
</head>
 
<body>
 
    <h2>GeeksforGeeks</h2>
    <form action="" method="post">
 
        <!-- email with pattern attribute for email validation -->
        <label for="email">Email:</label>
        <input type="email" id="email"
               name="email" required><br>
 
        <!-- Mobile number with pattern attribute for numeric input -->
        <label for="phone">Phone:</label>
        <input type="number" id="phone"
               name="phone" pattern="[0-9]{10}"
               placeholder="Enter 10-digit mobile number"
               required><br>
       
        <!-- Submit button -->
        <input type="submit" value="Submit">
    </form>
    <h2>MERN Devlopment</h2>
    <p>
        MERN is all about MongoDB ,
        ExpressJS , ReactJS , NodeJS
    </p>
 
</body>
 
</html>