CoffeeRun is humming along! Users can enter coffee orders in the form, and the order information is processed and stored. But what would happen to your app – and your coffee truck – if someone submitted an order with missing or unusable information?
Not to worry. You can easily handle these scenarios with a little bit of code to make sure the data is OK for your application to use. In fact, this is an essential step if you ever send data back to a server. Almost every modern browser is prepared to validate form data when it is submitted. All you need to do is provide the rules.
In this chapter, you are going to learn two techniques for form validation. The first technique is to add validation attributes to the HTML, allowing the browser’s built-in validation mechanisms to take effect. The second is to write your own validation code in JavaScript, using the Constraint Validation API.
The most basic form of validation is to check whether a field has a value and is not completely empty. This kind of check does not make sense for fields with default values, like your size, flavor, and strength fields. But it is just what you need for your order and email fields – you definitely do not want orders to be submitted with those fields left blank.
In index.html, add
the required Boolean attribute to the order and
email fields.
...
<div class="form-group">
<label for="coffeeOrder">Order</label>
<input class="form-control" name="coffee" id="coffeeOrder"
autofocus required />
</div>
<div class="form-group">
<label for="emailInput">Email</label>
<input class="form-control" type="email" name="emailAddress"
id="emailInput" value="" placeholder="[email protected]"
required />
</div>
...
Remember that a Boolean attribute should not be assigned a value.
If you make the mistake of writing something like
required="false", the value will be true
and the field will be required!
The browser only cares about the
existence of the attribute and ignores any value assigned.
That point bears repeating: If a Boolean attribute exists for an element,
the browser considers the value to be true, regardless of
the value you set for it.
Save index.html, make sure browser-sync is running, and load CoffeeRun in the browser.
Try submitting the form without filling out either
or both of the required fields. You will see a warning, as in Figure 12.1.
Also, notice that there are no console messages from your submit
handlers. The submit event only fires after the browser
validates your form (Figure 12.2).
