diff options
| author | Mark Otto <[email protected]> | 2017-06-10 16:31:27 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-06-10 16:31:27 -0700 |
| commit | 59817a1729cf4978b2e134daabe0efcb80996290 (patch) | |
| tree | 51465595428b281af8316bb694688d560d6d8711 /docs/4.0/components/forms.md | |
| parent | 0cb95c66432d9408ac9db454efd878c285f6cd1b (diff) | |
| download | bootstrap-59817a1729cf4978b2e134daabe0efcb80996290.tar.xz bootstrap-59817a1729cf4978b2e134daabe0efcb80996290.zip | |
document server side fallbacks
Diffstat (limited to 'docs/4.0/components/forms.md')
| -rw-r--r-- | docs/4.0/components/forms.md | 38 |
1 files changed, 33 insertions, 5 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 4ce1ac267..845002c2f 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> |