Validators / hexColor

Edit on Github

Validate a hex color.

Option Equivalent HTML attribute Type Description
message data-bv-hexcolor-message String The error message

Example

<form id="colorForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Color</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" name="color" />
        </div>
    </div>
</form>
<script>
$(document).ready(function() {
    $('#colorForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            color: {
                validators: {
                    hexColor: {
                        message: 'The color code is not valid'
                    }
                }
            }
        }
    });
});
</script>

Color Picker example

The following form uses a Bootstrap Color Picker.

Try to type an invalid color code and choose the picker. The picker automatically fixes or reset the color, and the error message is gone.

Pick a color 
<!-- Required CSS -->
<link href="/bootstrap-validator/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />

<form id="colorPickerForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Color</label>
        <div class="col-lg-4">
            <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>
<!-- Required JS -->
<script src="/bootstrap-validator/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

<script>
$(document).ready(function() {
    $('#colorPickerForm').bootstrapValidator({
        fields: {
            color: {
                validators: {
                    hexColor: {
                        message: 'The color code is not valid'
                    }
                }
            }
        }
    });

    $('#colorPicker')
        .colorpicker()
        .on('showPicker changeColor', function(e) {
            // Re-validate the color when user choose a color from the color picker
            $('#colorPickerForm')
                .data('bootstrapValidator')                 // Get BootstrapValidator instance
                .updateStatus('color', 'NOT_VALIDATED',)    // Set the color as not validated yet
                .validateField('color');                    // and validate the color
        });
});
</script>

Comments

If you want to report a bug, please submit the issue on Github. Do NOT post the issue here.

For a general question or feedback, use the form below.