This package has been deprecated

    Author message:

    no longer supported

    vui-validation

    1.1.2 • Public • Published

    vui-validation

    Bower version NPM version Build status Dependency Status

    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.

    Install

    npm i vui-validation

    DownloadsWeekly Downloads

    1

    Version

    1.1.2

    License

    Apache-2.0

    Last publish

    Collaborators

    • d2l-travis-deploy