Open In App

How To Validate Input Field In The HTML Form?

Last Updated : 01 Dec, 2025
Comments
Improve
Suggest changes
6 Likes
Like
Report

Input fields are essential components of HTML forms, enabling users to provide data for processing. Ensuring proper validation of these input fields enhances user experience and prevents errors or malicious inputs.

Project Overview

We will create simple Validating Input Fields in HTML Forms.

  • A simple HTML form with various input fields to collect user data.
  • First Name and Last Name: Text input fields with required validation and minimum character length.
  • Email Address: Input field for email with built-in validation for proper email format.
  • Password: Secure input field with a minimum character limit.
  • Phone Number: Input field with a specific pattern for phone number format validation
  • A simple "Submit" button to send the data once the form is filled and validated.

Project Preview

Form-Validation
Validate Input Field In The HTML Form

Validating Input Fields HTML

HTML 
<html>
<head></head>
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Validate Input Fields in HTML Form
        </h3>
        <form action="#" method="post">
            <label for="fname">First Name:</label>
            <input type="text" name="fname" id="fname" 
                placeholder="Enter your first name" required minlength="2">
            <br><br>
            <label for="lname">Last Name:</label>
            <input type="text" name="lname" id="lname" 
            placeholder="Enter your last name" required minlength="2">
            <br><br>
            <label for="email">Email Id:</label>
            <input type="email" name="email" id="email" 
                placeholder="Enter your email address" required>
            <br><br>
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" 
                placeholder="Enter a secure password" required
                minlength="8">
            <br><br>
            <label for="phone">Phone Number:</label>
            <input type="tel" name="phone" id="phone" 
                placeholder="XXX-XXX-XXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                title="Format: 123-456-7890" required>
            <br><br>
            <input type="submit" value="Submit">
        </form>
    </center>
</body>
</html>
  • HTML Structure: The form uses a centered layout with headings to display "GeeksforGeeks" and a subtitle. It includes a form with labeled input fields for user data collection.
  • First Name, Last Name: Text fields with required and minimum length validation.
  • Email: Validates the email format using type="email".
  • Password: Requires a minimum of 8 characters.
  • Phone Number: Validates format 123-456-7890 using a regex pattern.
  • Submit Button: A single Submit button is included to send the form data upon successful validation.
  • Built-in Validation: Uses attributes like required, minlength, and pattern for real-time browser validation, ensuring user inputs are correct.
  • User Experience Enhancements: Includes placeholders for guidance and tooltips (title) to explain input formats, making the form intuitive and user-friendly.

HTML Form Validation Attributes

Attributes

Uses

Required

It ensures the user fills out a field before the form is submitted.

Maxlength

Sets a maximum number of characters that can be entered.

Minlength

Sets a minimum number of characters required.

Pattern

Specifies a regular expression that the input value must match

Type

Determines the type of input and enforces specific validation rules.

Min and Max

Set minimum and maximum values for numeric or date inputs.

Title

Provides a tooltip with guidance on input requirements when the input does not match the pattern

Multiple

Allows multiple entries for certain types of inputs like email or file.

Placeholder

Displays a hint or example text inside the input field.

Disabled

It disables the input, making it uneditable and excluding it from form submission.

Autocomplete

Controls whether the browser should automatically fill in values based on previous inputs.

Autofocus

Automatically focuses on a specific input field when the page loads.

Readonly

Makes the input field uneditable but includes it in the form submission

Novalidate

Disables native HTML form validation.

Suggested Quiz
5 Questions

Which attribute ensures that an input field must be filled before form submission?

  • A

    minlength

  • B

    title

  • C

    readonly

  • D

    required

Explanation:

required prevents form submission until the user enters a value.

What is the purpose of the pattern attribute in an input field?

  • A

    To set the maximum allowed characters

  • B

    To apply CSS styling onto the input box

  • C

    To validate the input using a regular expression

  • D

    To automatically complete the field using past entries

Explanation:

pattern ensures the input matches a specific regex format, such as phone numbers.

Which input type automatically validates email formatting in HTML forms?

  • A

    type="email"

  • B

    type="text"

  • C

    type="url"

  • D

    type="search"

Explanation:

type="email" checks for a correctly formatted email address before submission.

What does the minlength attribute validate in an input field?

  • A

    The earliest date allowed in a calendar input

  • B

    The smallest value for numeric entries

  • C

    The minimum number of characters required

  • D

    The lowest number of times input can repeat

Explanation:

minlength enforces a minimum character count, useful for names and passwords.

What is the purpose of the title attribute in form validation?

  • A

    It highlights the field automatically when clicked

  • B

    It displays a tooltip with guidance when the value is invalid

  • C

    It resets the form inputs to default values

  • D

    It prevents editing of the field while keeping it visible

Explanation:

The title attribute shows a tooltip explaining format requirements when the input does not match the pattern.

Image
Quiz Completed Successfully
Your Score :   2/5
Accuracy :  0%
Login to View Explanation
1/5 1/5 < Previous Next >

V

vkash8574
Improve
Article Tags :

Explore

Lightbox