Although this book does not cover the server-side logic required to make this happen, we will need to implement one last essential stepping stone, client-side form validation. In other words, what is currently missing from our form, aside from the server-side code to send or store the actual message, is a way for us to validate the user's form input and to notify the user should they fill out the form incorrectly. One obvious solution is to identify what type of input the form fields require, and then to use either plain JavaScript or jQuery to check the contents of each field using regular expressions. Once an expression fails to match, we could then set the contents of a specific HTML element to contain an error message. However, do we really need to implement all this from scratch? The short answer is no . Form validation is a well explored area within web development. Consequently, there exist plenty of third-party JavaScript libraries that allow us to implement form validation quickly and with relatively little effort. As such, we will not be concerned with implementing the client-side validation logic as part of this book. Instead, a more noteworthy topic is Bootstrap's new validation styles. Unlike its predecessor, Bootstrap 4 comes with form validation styles, which greatly simplifies form development. Specifically, Bootstrap provides the has-success , has-warning, and has-danger validation classes, which are to be added to the parent element of input in order to indicate a specific context (Figure 4.19):

    <div class="form-group input-group has-danger">
        <span class="input-group-addon"><i class="fa fa-at"></i></span>
        <input type="text" class="form-control" placeholder="Your email 
        address">
    </div>

Take a look at the following screenshot:

Figure 4.19: The has-danger context class applied to the form-group element containing our e-mail address input.

Adding the form-control-* to the input will cause a contextual icon to appear to the right-hand side of the input. The * denotes one of the three contexts— danger , success, or warning . So adding both has-danger to the form-group element and form-control-danger to the input element will cause the input to be highlighted using the danger context. A small icon, indicating failure, will appear to the right of the input:

    <div class="form-group input-group has-danger">
        <span class="input-group-addon"><i class="fa fa-at"></i></span>
        <input type="text" class="form-control form-control-danger" 
        placeholder="Your email address">
    </div>