Validation message component

Basic validation for forms, like inputs, selects. Features:

Multiple types
Dynamic setting and getting types and messages
Usable inline with form's elements

Docs:

Sass

Preferable types are component--type_typeValue, like div.cs-validation-message__type_negative. You can add as many modifier as you like and inject them into js constructor

JS

Interfaces

constructor settings:

    interface IValidationMessageSettings {
        types: Map;
    }

Component gets optional settings, containing types MAP, map entry should be Key: typeName, Value: typeClass, example:

    let validationTypes: Map = new Map();
    validationTypes.set('positive', 'cs-validation-message--type_positive');
    validationTypes.set('warning', 'cs-validation-message--type_warning');
    validationTypes.set('negative', 'cs-validation-message--type_negative');

class public interface

    interface IValidationMessage {
        getMessage(): string;
        setMessage(message: string): void;
        getType(): string;
        setType(type: string): void;
    }

Constructor

    constructor($component: JQuery, settings?: IValidationMessageSettings)

Example


    new ValidationMessage($('.cs-validation-message'));

Validation message text