This is quite long topic and but shortly I will describe here how to use HTML5 forms validation. You must remember that it can’t replace the validation of the data done in the back-end. HTML5 form validation is only a pre-check of data entered by user into form.
You can add following attributes to your inputs elements in HTML5:
required– this simple attribute added to input field will prevent form being sent till user put some value here. The example of input with that property is:
<input type="text" name="Surname" required>min/max– with this attributes you can set the range of acceptable values in number input field. The example is as following:
<input type="number" name="age" min="0" max="120">minlength/maxlength– this define the minimal and maximal length of string entered by user in textual input field. The example:
<input type="text" name="code" minlength="10" maxlength="20">pattern– this is very useful attribute. With that we can specify whatever we want. The good example is email pattern where you must put the regular expression (regex):
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
What is also important – if input fields is valid or invalid, browsers add to this html elements para-classes:
:valid/:invalid What makes possible creating styles for that elements, without using any JavaScript frame work or getting the response from back-end.
Let’s see now how we can combine all of above HTML5 from validation in one form containing all inputs. The example below is the simplest HTML5 validation with only very limited JavaScript support. Let’s go through that example:
- HTML is very simple – we have input fields similar like in examples above (Name, age, discount code and email). All fields are required, there are the same conditions like in examples above (min/max, minlength/maxlength and pattern to email address).
- At the bottom of the code there is short JavaScript code – when “Send” button is being clicked then a class “form-sent” is added to html
formelement. This is very important, because we do not want to validate the form before it is being sent! So the invalid form messages should not be visible before first try to send that form. - Next we have quite sophisticated CSS code, which is defining how to display the form when is valid or invalid, the same with each input element. According comments there are following parts of CSS code:/* GENERIC FORM STYLES */ – this styles apply to whole form as it is, and hides paragraph text with notification when form is invalid (class: form-invalid-msg)./* AFTER BUTTON CLICK STYLES – FORM */ – this styles apply to form after the SEND button is being clicked. There appears class “form-sent” – which is added in JS after button click (read point 2 above)./* AFTER BUTTON CLICK STYLES – INPUTS */ – this styles apply to inputs after the SEND button is being clicked.
Check out whole code and how it works in reality below the code. You can find it also HERE on our Gitlab.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEV-BAY.COM HTML5 FORM VALIDATION EXAMPLE</title>
<style>
/* GENERIC FORM STYLES */
fieldset {
border: none;
}
input:empty {
border: 2px solid black;
}
.form-invalid-msg {
display: none;
color: red;
}
/* AFTER BUTTON CLICK STYLES - FORM */
form.form-sent:invalid .form-invalid-msg {
display: block;
}
form.form-sent:invalid {
border: 2px solid red;
}
/* AFTER BUTTON CLICK STYLES - INPUTS */
form.form-sent input:valid {
border: 2px solid green;
}
form.form-sent input:invalid {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<fieldset>
<label>
Name: <input type="text" name="Surname" required>
</label>
</fieldset>
<fieldset>
<label>
Age: <input type="number" name="age" min="0" max="120" required>
</label>
</fieldset>
<fieldset>
<label>
Discount code: <input type="text" name="code" minlength="10" maxlength="20" required>
</label>
</fieldset>
<fieldset>
<label>
Email: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
</label>
</fieldset>
<p class="form-invalid-msg">Form is invalid!</p>
<button type="submit">Send</button>
</form>
<script>
const btn = document.querySelector("button");
const form = document.querySelector("form");
btn.onclick = (event) => {
form.className = "form-sent";
}
</script>
</body>
</html>This was the simply example how to work with that, you can copy and paste this code in your project and extend it wherever you want. But remember it is not full documentation of HTML5 forms validation, for more check Mozilla Developers Network here.
