Getting Started
Events

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 with ES6 module
            
// You might need to change the importing path
import color from 'formvalidation/dist/es6/validators/color' ;
const result = color ( ) . validate ( {
value : ... ,
options : {
type : ... ,
message : ... ,
} ,
} ) ;
/*
result is an object of
{
valid: true or false,
message: The error 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

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

ES6 Module Example

The following snippet shows how to use the color validator with ES6 module:
            
// You might need to change the importing path
import color from 'formvalidation/dist/es6/validators/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

See also