vui-validation v1.1.2

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.