vui-validation
This component contains Sass mixins and CSS for styling validation messages.
Installation
vui-validation
can be installed from Bower:
bower install vui-validation
Or alternatively from NPM:
npm install vui-validation
Depending on which installation method you choose, use that path when doing the SASS import:
@import 'bower_components/vui-validation/validation.scss';
// or...
@import "node_modules/vui-validation/validation.scss";
Usage
Bubbles:
Bubbles are intended to be displayed on focus. In the follwing example, the consumer would apply the bubble-show
class to display the bubble.
<input type="text" aria-invalid="true" aria-describedby="validation-message" />
<div id="validation-message" class="bubble bubble-show">
<span>A validation message.</span>
</div>
.bubble {
@include vui-validation-bubble;
}
.bubble-show {
@include vui-validation-bubble-show;
}
.bubble > span {
@include vui-validation-bubble-content;
}
Bubbles can also be displayed above content.
<div id="validation-message" class="bubble-above bubble-show">
<span>A validation message.</span>
</div>
<input type="text" aria-invalid="true" aria-describedby="validation-message" />
.bubble-above {
@include vui-validation-bubble;
}
.bubble-show {
@include vui-validation-bubble-show;
}
.bubble-above > span {
@include vui-validation-bubble-content-above;
}
Important: form elements should be marked up to provide validation information that is available to assistive technology, for example, by using aria-invalid
, aria-required
, and aria-describedby
.
Coding styles
See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.