Embedded Files
Most modern browsers propose default behavior for validating input fields and forms.
The built-in validation system that comes with HTML5 automatically adds a CSS pseudo class to all input fields. Invalid fields (i.e. a badly worded email address in an <input type="email"> input field), will inherit the :invalid pseudo class, valid fields will inherit the :valid pseudo class.
A first step to improve your HTML form is to add some CSS rules to your input fields. This adds visual feedback to the validity of input fields values - while the user is typing - such as changing the color of the border of input fields, or green/red icons on the right of the field, as shown in the small picture at the top right of this page.
Also, at the time of submitting the form, some extra messages may be displayed as pop up text bubbles.
The default bubble message and visual feedback differ from one implementation to another, but they may be customized, with some limitations that will be explained later.
For example, browsers may provides default feedback on the input field's border (red = invalid, green = ok). This default behavior can be overridden by CSS rules as illustrated in the section about new input type attributes.
Examples
Examples
Example #1: styling "required", "valid" and" invalid" fields using CSS3 pseudo-classes
Example #1: styling "required", "valid" and" invalid" fields using CSS3 pseudo-classes
Here is an online example at JSBin, or try it below in your browser:
Source code extract:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 pseudo-classes for form validation visual feedback</title>
<style>
input:invalid { background-color: lightPink;}
input:valid { background-color:lightGreen; }
input:required {border: 2px solid red;}
input:optional {border: 2px solid green;}
fieldset {
border:1px solid;
padding:20px;
}
.formLabel { display: inline-block; width: 140px; text-align: right; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Type invalid values and see the result</legend>
<label for="myEmail" class="formLabel">E-mail:</label> <input type="email" id="myEmail" required/><br>
<label for="myURL" class="formLabel">Homepage (URL):</label> <input type="url" id="myURL" required/><br>
<label for="myPhone" class="formLabel">Phone number:</label> <input type="tel" id="myPhone" pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}" placeholder="e.g. 416-555-1234" required/><br>
<button>Submit form</button><br />
</fieldset>
</form>
<p>
</body>
</html>
Try the online example with different Web browsers, both with and without the CSS rules. See the differences between FireFox/Chrome/Opera in the default visual feedback behavior. Don't worry: all default behavior can be overridden if you provide your own CSS rules.
Example #2: add CSS transitions + an icon/marker to the right of the input fields
Example #2: add CSS transitions + an icon/marker to the right of the input fields
Try this online example at JSBin or try it here in your browser. This example adds a small icon that changes depending on the validity of the input field:
Source code extract:
.myForm input:focus {
padding-right:70px;
}
.myForm input {
transition: padding .25s;
}
.myForm input:required:valid {
background:url('https://i.imgur.com/BJolppS.png') no-repeat right top;
}
.myForm input:required {
background:url('https://i.imgur.com/7pIN7wz.png') no-repeat right top;
}
This time, we just added an attribute class="myForm" to our form, in order to avoid interfering with the other examples on this page, and we tweaked the CSS rules a little.
The rule at line 1 says that any time we click on an input field, it will enlarge itself to the right, while the rule at line 4 will make it animated.
The rules at lines 8 and 11 target the input fields with a required attribute. They will change the background by displaying a small green or red icon, corresponding to the valid/invalid status of the input field.
Use the title attribute for specifying a custom message
Use the title attribute for specifying a custom message
You can simply use the input's title attribute to provide a message for pattern-mismatches, and more generally for all validation errors. This solution is really neat and doesn't require JavaScript!
Try the online example at JSBin, or try it here in your browser (type invalid values and look at the custom messages):
Extract from source code:
<form class="myForm">
<fieldset>
<legend>Type invalid values and see the result</legend>
<label for="myEmail" class="formLabel">E-mail:</label>
<input type="email" id="myEmail"
title="You don't know what an email address looks like, do you?"
required/><br>
...
<button>Submit form</button><br />
</fieldset>
</form>
Beware that browser implementations may differ. Chrome, Opera will display the title attribute value in error message bubbles when the form is submitted, while Safari and FireFox (desktop and mobile) will simply ignore it.
You must also take care of the different languages, otherwise you will get error message bubbles that show some parts in the local language, and the message from the title attribute "as is".
Google Chrome on a French desktop computer:
Same example on FireFox, the title attribute is ignored:
Page updated
Google Sites
Report abuse