CoffeeRun now validates both the order field and the email address.
Now it is time to enhance the UI by visually
marking invalid fields. For this very short piece of CSS, you will
add one ruleset in a <style> tag to the <head> in index.html.
...
<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst
rap/3.3.6/css/bootstrap.min.css">
<style>
form :invalid {
border-color: #a94442;
}
</style>
</head>
...
This adds a border to any field inside your form that has the
pseudo-class :invalid. This pseudo-class is
automatically added by the browser when the form runs its
validation checks.
Save and return to the browser. Press the Tab key a few times (or click outside of the text-entry fields) to focus on a form element other than the order or email fields. The two required fields will have a reddish border color (Figure 12.6).
It would be more appropriate for the border to only appear on an invalid field that is required and has focus. Add two more pseudo-classes to your selector in index.html:
<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst
rap/3.3.6/css/bootstrap.min.css">
<style>
form :focus:required:invalid {
border-color: #a94442;
}
</style>
</head>
...
You have specified that fields that have the three pseudo-classes
:focus, :required, and
:invalid will get the new border color (Figure 12.7).
CoffeeRun is developing into a fully featured web app. In the next two chapters, you will sync the data to a remote server using Ajax.