color validator

Validate a color in different formats

Options

Using with form field

The HTML attributes are used to set the validator options via the Declarative plugin

Name	HTML attribute	Type	Description
`message`	`data-fv-color___message`	`String`	The error message
`type`	`data-fv-color___type`	`String` or `String[]`

The type option can be one of supported types listed below

Array of supported types
A string consists of supported types, separated by a comma

Using the ES6 module

// You might need to change the importing path
import { color } from '/vendors/@form-validation/cjs/validator-color';

const result = color().validate({
    value: ...,
    options: {
        type: ...,
        message: ...,
    },
});
/*
result is an object of
{
    valid: true or false,
    message: The error message
}
*/

Using the npm package

Install the validator package:

$ npm install @form-validation/validator-color

Use the color validator:

import { color } from '@form-validation/validator-color';

const result = color().validate({
    value: ...,
    options: {
        type: ...,
        message: ...,
    },
});

Supported types

Following is the list of supported types:

Type	Sample
hex	`#0000FF`, `#00F`
hsl	`hsl(120, 50%, 50%)`
hsla	`hsla(120, 50%, 50%, 1)`
keyword	`transparent`
rgb	`rgb(255, 255, 255)`
rgba	`rgba(255, 255, 255, 1)`

The keyword type accepts the following colors:

Starting with	Colors
A	aliceblue, antiquewhite, aqua, aquamarine, azure
B	beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood
C	cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan
D	darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue
F	firebrick, floralwhite, forestgreen, fuchsia
G	gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, grey
H	honeydew, hotpink
I	indianred, indigo, ivory
K	khaki
L	lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen
M	magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin
N	navajowhite, navy
O	oldlace, olive, olivedrab, orange, orangered, orchid
P	palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple
R	red, rosybrown, royalblue
S	saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue
T	tan, teal, thistle, tomato, transparent, turquoise
V	violet
W	wheat, white, whitesmoke
Y	yellow, yellowgreen

Basic example

HTML5 Example

When the Declarative plugin is used, the color validator will be turned on automatically if the input uses HTML 5 type="color" attribute

According to the W3C specification, the color input only accepts 6 hex character values. 3 hex character values as #FFF is not valid.

HTML5 example

NPM package example

The following snippet shows how to use the color validator with the npm package:

import { color } from '@form-validation/validator-color';

const res1 = color().validate({
    value: '#0000FF',
    options: {
        type: 'hex',
        message: 'The value is not valid color',
    },
});
// res1.valid === true

const res2 = color().validate({
    value: 'hsl (120,50%,50%)',
    options: {
        type: 'hsl',
        message: 'The value is not valid color',
    },
});
// res2.valid === false

const res3 = color().validate({
    value: 'blue',
    options: {
        type: 'keyword',
        message: 'The value is not valid color',
    },
});
// res3.valid === true

Changelog

v2.0.0

Add the npm package

choice validator creditCard validator