Form validation ensures that the user submits the correct data and is made aware of any incorrect input data. Form validation involves identifying what type of input the form fields require and then checking the contents of each form field. Once an incorrect data item is detected, the user is notified, typically through an error message and the highlighting of the incorrectly completed input box.
Note that a web application should never rely on just client-side data validation. Since client-side data validation can be easily circumvented by a malicious user, data validation should always be handled server-side. Only through server-side data validation can you ensure the security of your web application.
As form validation is a well-explored area within web development, we luckily do not need to implement all of the aforementioned from scratch. There exist plenty of third-party libraries that allow one to implement data validation quickly and with relatively little effort. As such, we will not be concerned with implementing the client-side validation logic nor the server-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 simplify form development. Specifically, Bootstrap provides the invalid, valid, and was- validated validation classes, which are used to indicate the validation state of the form (figure 4.20):
<style>
/*The following CSS fixes a Bootstrap 4 Beta bug, in which the invalid-feedback elements display incorrectly inside input groups. The code may be removed when this bug is fixed in future releases. Fix taken from https://github.com/twbs/bootstrap/issues/23454*/
.input-group {
flex-wrap: wrap!important;
}
.input-group .invalid-feedback {
flex-basis: 100%!important;
}
</style>
form class=”was-validated” novalidate>
<div class=”form-group input-group”>
<div class=”input-group-prepend”>
<span class=”input-group-text”>
<i class=”fa fa-user”></i>
</span>
</div>
<input
type=”text”
class=”form-control is-invalid”
placeholder=”Your name” >
<div class=”invalid-feedback”>
Please provide a name.
</div>
</div>
<!– Remaining form markup here –>
</form>
Adding the novalidate attribute to a form element, as we have done in the preceding code, will disable the default browser validation styles. Adding the is-invalid class to the input will cause a red border to appear around the input box, while adding the invalid- feedback class to an element containing some feedback text will cause the text to be styled red and appear below the input element. The feedback classes are scoped to the was- validated class. As noted in the official Bootstrap 4 (Beta) documentation:
Bootstrap scopes the invalid and valid styles to parent the was-validated class usually applied to form. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.