HTML Input Control Elements Input Validation
Example
HTML input validation is done automatically by the browser based on special attributes on the input element. It could partially or completely replace JavaScript input validation. This kind of validation can be circumvented by the user via specially crafted HTTP requests, so it does not replace server-side input validation. The validation only occurs when attempting to submit the form, so all restricted inputs must be inside a form in order for validation to occur (unless you're using JavaScript). Keep in mind that inputs which are disabled or read-only will not trigger validation.
Some newer input types (like email, url, tel, date and many more ) are automatically validated and do not require your own validation constraints.
5
Required
Use the required attribute to indicate that a field must be completed in order to pass validation.
<input required>
Minimum / Maximum Length
Use the minlength and maxlength attributes to indicate length requirements. Most browsers will prevent the user from typing more than max characters into the box, preventing them from making their entry invalid even before they attempt submission.
<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">
Specifying a range
Use min and max attributes to restrict the range of numbers a user can input into an input of type number or range
Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />
5
Match a Pattern
For more control, use the pattern attribute to specify any regular expression that must be matched in order to pass validation. You can also specify a title, which is included in the validation message if the field doesn't pass.
<input pattern="\d*" title="Numbers only, please.">
Here's the message shown in Google Chrome version 51 when attempting to submit the form with an invalid value inside this field:
Not all browsers display a message for invalid patterns, although there is full support among most used modern browsers.
Check the latest support on CanIUse and implement accordingly.
5
Accept File Type
For input fields of type file, it is possible to accept only certain types of files, such as videos, images, audios, specific file extensions, or certain media types. For example:
<input type="file" accept="image/*" title="Only images are allowed">
Multiple values can be specified with a comma, e.g.:
<input type="file" accept="image/*,.rar,application/zip">
Note: Adding novalidate attribute to the form element or formnovalidate attribute to the submit button, prevents validation on form elements. For example:
<form>
<input type="text" name="name" required>
<input type="email" name="email" required>
<input pattern="\d*" name="number" required>
<input type="submit" value="Publish"> <!-- form will be validated -->
<input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>
The form has fields that are required for "publishing" the draft but aren’t required for "saving" the draft.
