How to perform form validation for a required field in HTML ?
Last Updated :
19 Sep, 2024
Performing form validation for a required field in HTML ensures that a user must fill in specific fields before submitting a form. This is typically done using the required attribute, which prevents form submission if the field is left blank, ensuring proper data input.
Required attribute
The required attribute in HTML ensures that an input field must be filled before form submission. It applies to various input types (text, email, password, etc.), preventing the form from being submitted if the field is left empty.
Syntax
<input type=". " id=" " name=" " required>
Example: In this example demonstrates the use of the required attribute, ensuring that both the "Name" and "Email" fields must be filled before form submission, preventing empty submissions and enforcing user input validation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML required attribute</title>
<style>
button {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>HTML 'required' Attribute</h1>
<form>
<label>Name:</label>
<input type="text" required />
<label>Email:</label>
<input type="email" required />
<button>Submit</button>
</form>
</body>
</html>
Output:
Maxlength attribute
The maxlength attribute in HTML limits the number of characters a user can input in a field. It helps prevent excessive input by restricting the maximum characters, ensuring proper data length in fields like text, password, or number.
Syntax
<input type="..." id="..." name="..." maxlength="...">
Note: When the maxlength attribute is set, it will not allow the user to enter more characters than those specified.
Example: In this example showcases the maxlength attribute, limiting the Roll No. input field to 10 characters. It ensures users cannot exceed the specified character limit, enhancing data input control and validation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML maxlength attribute</title>
<style>
button {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>HTML maxlength attribute</h1>
<form>
<label>Roll No.</label>
<input type="text" maxlength="10" required />
<label>Email:</label>
<input type="email" required />
<button>Submit</button>
</form>
</body>
</html>
Output:
Minlength attribute
The minlength attribute in HTML sets the minimum number of characters required for an input field. It ensures users provide adequate data, commonly used in fields like passwords or phone numbers for validation.
Syntax
<input type=" " id=" " name=" " minlength=" ">
Note: When the minlength attribute is set, an input field will not accept lesser characters than those specified.
Example: In this demonstrates the minlength attribute, requiring the Roll No. input field to have at least 5 characters. It ensures users provide sufficient data before submitting the form for validation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML minlength attribute</title>
<style>
button {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>HTML minlength attribute</h1>
<form>
<label>Roll No.</label>
<input type="text" minlength="5" required />
<label>Email:</label>
<input type="email" required />
<button>Submit</button>
</form>
</body>
</html>
Output:
Min and max attributes
The min and max attributes in HTML set the minimum and maximum allowable values for input fields, such as numbers, dates, or ranges, ensuring users input values within a defined range for validation.
Syntax
<input type=" " id=" " name=" " max=" ">
<input type=" " id=" " name=" " min=" " max=" ">
Example: In this example we demonstrates the min and max attributes for the Amount field, limiting values between 50 and 100, while also including a required "Email" field for submission.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML min and max attribute</title>
<style>
button {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>>HTML min and max attribute</h1>
<form>
<label>Amount</label>
<input type="number" min="50" max="100" required />
<label>Email:</label>
<input type="email" required />
<button>Submit</button>
</form>
</body>
</html>
Output:
Multiple attribute
The multiple attribute can help us to allow a user to enter more than one value in a single input field. The multiple attribute can be used only for email and file input types.
Syntax:
<input type=" " id=" " name=" " multiple>
Example: In this example we demonstrates the min and max attributes for the Amount field, restricting values between 50 and 100, and the multiple attribute for allowing multiple email addresses in the "Email" field.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML multiple attribute</title>
<style>
button {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>HTML multiple Attribute</h1>
<form>
<label>Amount</label>
<input type="number" min="50" max="100" required />
<label>Email:</label>
<input type="email" multiple required />
<button>Submit</button>
</form>
</body>
</html>
Output:
Pattern attribute
The pattern attribute in HTML specifies a regular expression that an input field's value must match. It ensures users provide data in a specific format, enhancing validation for fields like email, phone numbers, or passwords.
Syntax:
<input type=" " id=" " name=" " pattern=" ">
Example: In this example we use the pattern attribute to ensure the "Tel." field matches a 10-digit number, and the multiple attribute allows multiple email addresses in the Email field.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML pattern attribute</title>
<style>
button {
margin-top: 5px;
}
</style>
</head>
<body>
<h1>HTML pattern attribute</h1>
<form>
<label>Tel.</label>
<input type="text" pattern="[0-9]{10}" required />
<label>Email:</label>
<input type="email" multiple required />
<button>Submit</button>
</form>
</body>
</html>
Output:
In the above example, the pattern specifies that Tel. can be composed of digits only and its length must be 10.This is how we can make the form data required or add certain checks on the input that is entered.
Similar Reads
How To Create Registeration Form in HTML
HTML Registration Form is a web-based form designed to collect user information such as name, email, password, and other details. It typically includes input fields, validation, and a submit button to register users on a website.HTML Registration FormHow to Create HTML Registration FormBasic Structu
2 min read
HTML Login Form
HTML login form is used to authenticate users and grant access to secure sections of a website or application. It typically includes input fields for username/email and password, along with a submit button for logging in. Additionally, there is often an option for new users to create an account or s
3 min read
HTML Form Design
HTML forms are used on websites to collect information from users. They allow users to input information such as their name, email address, password, or feedback.The <form> tag defines the form structure.Form elements like <input>, <button>, and <select> are used to collect d
8 min read
How to add Radio Buttons in form using HTML ?
In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro
1 min read
How to Add a Telephone Number into a form using HTML?
In this article, we will learn how to add a telephone number field to an HTML form. Telephone numbers have numerous advantages and are an important component of contact forms, allowing for direct communication with the user. Users can receive messages or notifications regarding the services provided
2 min read
How to define a form for user input using HTML5 ?
In this article, we will learn how to create a form in a webpage by using the <form> tag. This tag is used to create form for user input. Also there are many elements which are used within form tag. Syntax: <form> Form Content... </form> Example: The following code snippet demonstr
1 min read
How to Prevent Buttons from Submitting Forms in HTML?
We will use different approaches for preventing buttons from submitting forms. There are several reasons where preventing the buttons from submitting forms, i.e., if the user hasn't completed all the required form fields, or added incorrect details in the form, etc. Below are the approaches to preve
3 min read
How to toggle password visibility in forms using Bootstrap-icons ?
Toggle password visibility in forms allows users to reveal or hide their typed passwords for convenience and security. Using Bootstrap icons, you can implement this feature by toggling the input field's type attribute between "password" and "text" upon icon click, revealing or hiding the password. A
2 min read
How to perform form validation for a required field in HTML ?
Performing form validation for a required field in HTML ensures that a user must fill in specific fields before submitting a form. This is typically done using the required attribute, which prevents form submission if the field is left blank, ensuring proper data input.Table of ContentRequired attri
4 min read
How do we take password input in HTML forms ?
In this article, we learn how to create a password input field in HTML. This can be done by using the <input> tag with type attribute which is set to the value "password". It involves sensitive information about the data of the user. The text in the input password field will be changed into bu
1 min read