How to perform form validation for a required field in HTML ?
Last Updated :
16 Jan, 2024
The form data is very important for a website and the correct form data or valid form data must be submitted to the form. To make sure that the form data is valid or to make an input field mandatory, various attributes can be used. We shall discuss the following attributes in this article & will understand them with the help of examples.Â
Required attribute:
If you want to make an input mandatory to be entered by the user, you can use the required attribute. This attribute can be used with any input type such as email, URL, text, file, password, checkbox, radio, etc. This can help to make any input field mandatory.
Syntax:
<input type=". " id=" " name=" " required>
Example: The implementation of required attribute
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 helps us to specify the maximum length of an input field in the form i.e. the maximum no. of characters that can be entered for the specific field. It can be used to make the maximum length of a telephone number in India as 10 digits so as to prevent any wrong input data submission.
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: The implementation of maxlength attribute
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 helps us to specify the minimum length of an input field in the form i.e. the minimum no. of characters that must be entered for the specific field. It can be useful to make the minimum length of a password that can’t be guessed or a telephone number in India as 10 digits so as to prevent any wrong input data submission.
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: The implementation of minlength attribute
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 of the input field are used to specify the minimum and maximum allowed values for an input field. We can create a range of allowed values using min and max together. min specifies the minimum value an input field can have whereas max specifies the maximum value for a field.
The min and max attributes work with the various input types such as number, range, date, datetime, month, time and week. We can use these attributes in a field where we want a user to enter some amount. We can set the maximum limit and minimum limit for the amount to be entered.
Syntax:Â
<input type=" " id=" " name=" " max=" ">
<input type=" " id=" " name=" " min=" " max=" ">
Example: The implementation of both min and max attribute
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: This example shows the implementation of multiple attribute
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 defines a particular pattern that an input field’s value must satisfy when the form is submitted. The pattern attribute works with text, date, search, URL, tel, email, and password input types. We make use of regex or regular expressions to specify the pattern. It is useful in situations where we want the input entered must be according to the given pattern only. The inputs that do not satisfy the pattern will not be accepted by the form.
Syntax:
<input type=" " id=" " name=" " pattern=" ">
Example: The implementation of pattern attribute
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...