diff options
| author | Mark Otto <[email protected]> | 2017-06-13 22:12:04 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-06-13 22:12:04 -0700 |
| commit | d16ece5b2a65f3fa7ffc19e865cd1987ec6117de (patch) | |
| tree | e6b8be07a522d956c8d8115f6e4f3a799c943524 /docs/4.0/components/forms.md | |
| parent | 225950141867daa5680975f950ce8ab6477f5211 (diff) | |
| parent | 142c2a0851ebe662f2bbbf377ae98aa8682e2308 (diff) | |
| download | bootstrap-d16ece5b2a65f3fa7ffc19e865cd1987ec6117de.tar.xz bootstrap-d16ece5b2a65f3fa7ffc19e865cd1987ec6117de.zip | |
Merge branch 'form-tweaks' of https://github.com/twbs/bootstrap into form-tweaks
Diffstat (limited to 'docs/4.0/components/forms.md')
| -rw-r--r-- | docs/4.0/components/forms.md | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 6c24c83ab..3fc353311 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -679,17 +679,17 @@ We **highly recommend** custom validation styles as native browser defaults are ### How it works -Here's a rundown of how form validation works: +Here's how form validation works with Bootstrap: -- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, on `<input>`, `<select>`, and `<textarea>` elements. -- Due to constaints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. +- HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements. - Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<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). -- As a fallback, `.is-invalid` and `.is-valid` classes are available for [server side validation](#server-side) (without the need for a `.was-validated` parent class). +- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class. +- Due to constaints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. -- Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. +- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. - You may provide custom validity messages with `setCustomValidity` in JavaScript. -With that in mind, consider the following two demos for our custom form validation styles and browser defaults. +With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults. ### Custom styles |
