So, we have various elements at our disposal that we can use on the form. We can enter different values into them. However, it is not uncommon for users to enter values that are not quite correct: for example, numbers are expected, but the user enters letters, and so on. And to prevent and validate invalid input, HTML5 has a validation mechanism.
The advantage of using validation in HTML5 is that after incorrect input, the user can immediately receive an error message and make appropriate changes to the entered data.
To create validation on HTML5 form elements, a number of attributes are used:
Required: Requires a value to be entered. For textarea, select, input elements (of type text, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)
Min and max: the minimum and maximum allowable values. For an input element with type datetime-local, date, month, time, week, number, range
Pattern: Specifies the pattern that the input should match. For an input element with type text, password, email, url, search, tel
Required attribute
The required attribute requires a value to be present:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Validation</title>
</head>
<body>
<form method="get">
<p>
<label for="login">Login:</label>
<input type="text" required id="login" name="login" />
</p>
<p>
<label for="password">Password:</label>
<input type="password" required id="password" name="password" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
If we do not enter any data into these fields, leaving them empty, and click on the submit button, the browser will display error messages to us, and the data will not be sent to the server:
Depending on the browser, the visualization of the message may be slightly different. Also, the borders of an incorrect input field can be painted red. For example, the behavior when sending empty messages in Firefox:
Max and Min Attributes
The max and min attributes are used to limit the range of input values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Validation : Min and Max Attribute</title>
</head>
<body>
<form method="get">
<p>
<label for="age">Age:</label>
<input type="number" min="1" max="20" value="18" id="age" name="age" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
Pattern Attribute
The pattern attribute specifies the pattern that the data must match. To define a pattern, a language called regular expressions is used . Consider the simplest examples:
Here, a regular expression is used to enter a phone number \+\d-\d{3}-\d{3}-\d{4}. It means that the first element in the number must be a plus sign +. The \d expression represents any digit between 0 and 9. The expression \d{3} means three consecutive digits, and \d{4}four consecutive digits. That is, this expression will match a phone number in the format “+1-234-567-8888”.
If we enter data that does not match this pattern and click on submit, the browser will display an error:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pattern attribute In HTML5</title>
</head>
<body>
<form method="get">
<p>
<label for="phone">Phone:</label>
<input type="text" placeholder="+1-234-567-8901" pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
Disabling Validation
Validation is not always desirable, sometimes you need to turn it off. And in this case, we can either use the novalidate attribute on the form element , or the formnovalidate attribute on the submit button