FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

color validator

Validate a color in different formats

← Validators

Options

Option HTML attribute Type Description
message data-fv-color-message String The error message
type data-fv-color-type String|String[]

The type of color. It can be:

  • One of supported types listed below
  • Array of supported types
  • A string consists of supported types, separated by a comma
When setting options via HTML attributes, remember to enable the validator by setting data-fv-color="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods

Supported types

Following is the list of supported types:

Type Valid sample Invalid sample
hex
hsl
hsla
keyword
rgb
rgba

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

Example

Basic example

<form id="colorForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Color</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="color" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#colorForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            color: {
                validators: {
                    color: {
                        type: ['hex', 'hsl', 'hsla', 'keyword', 'rgb', 'rgba'],  // The default value for type
                        message: 'The value is not valid color'
                    }
                }
            }
        }
    });
});
</script>
<form id="colorForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-sm-3 control-label">Color</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="color"
                data-fv-color="true"
                data-fv-color-type="hex,hsl,hsla,keyword,rgb,rgba"
                data-fv-color-message="The value is not valid color" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#colorForm').formValidation();
});
</script>

HTML5 example

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.

<form id="colorHtml5Form" class="form-horizontal"
      data-fv-framework="bootstrap"
      data-fv-icon-valid="glyphicon glyphicon-ok"
      data-fv-icon-invalid="glyphicon glyphicon-remove"
      data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Color</label>
        <div class="col-xs-5">
            <input class="form-control" name="color"
                   type="color"
                   data-fv-color-message="The color code is not valid" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#colorHtml5Form').formValidation();
});
</script>

Color picker example

The following form uses a Bootstrap Color Picker. 

<!-- Required Bootstrap ColorPicker library -->
<link href="/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<script src="/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

<style type="text/css">
/* Adjust feedback icon position */
#colorPickerForm .colorPickerContainer .form-control-feedback {
    right: -15px;
}
</style>

<form id="colorPickerForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Color</label>
        <div class="col-xs-6 colorPickerContainer">
            <div class="input-group" id="colorPicker">
                <input type="text" class="form-control" name="color" />
                <span class="input-group-addon" style="color: #fff">Pick a color</span>
            </div>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#colorPickerForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            color: {
                validators: {
                    color: {
                        message: 'The color code is not valid'
                    }
                }
            }
        }
    });

    $('#colorPicker')
        .colorpicker()
        .on('showPicker changeColor', function(e) {
            $('#colorPickerForm').formValidation('revalidateField', 'color');
        });
});
</script>

Related validators

The following validators might be useful to you:

← choice validator creditCard validator →