diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 4ce1ac2679..845002c2fe 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -908,15 +908,43 @@ While these feedback styles cannot be styled with CSS, you can still customize t </div> </div> +### Server side + +We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes. + +{% example html %} +<form> <div class="row"> - <div class="col-md-7 mb-3"> - <input type="text" class="form-control" placeholder="City" required> + <div class="col-md-6 mb-3"> + <label for="validationServer01">First name</label> + <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required> + </div> + <div class="col-md-6 mb-3"> + <label for="validationServer02">Last name</label> + <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required> + </div> + </div> + <div class="row"> + <div class="col-md-6 mb-3"> + <label for="validationServer03">City</label> + <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required> + <div class="invalid-feedback"> + Please provide a valid city. + </div> </div> <div class="col-md-3 mb-3"> - <input type="text" class="form-control" placeholder="State" required> + <label for="validationServer04">State</label> + <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required> + <div class="invalid-feedback"> + Please provide a valid state. + </div> </div> - <div class="col-md-2 mb-3"> - <input type="text" class="form-control" placeholder="Zip" required> + <div class="col-md-3 mb-3"> + <label for="validationServer05">Zip</label> + <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required> + <div class="invalid-feedback"> + Please provide a valid zip. + </div> </div> </div>