How to set it to default color when Reset button is clicked on?

When the page is loaded, I am setting the default color to #444444. This is working fine.

Similarly when the RESET button was clicked, I need to set it to defalt color #444444:

This is my code:

$(document).ready(function() {
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        fields: {
            color: {
                validators: {
                    hexColor: {
                        message: 'The color code is not valid'

        .on('showPicker changeColor', function(e) {
            $('#colorPickerForm').bootstrapValidator('revalidateField', 'color');

        // When reset is clicked 

Full JSFiddle:

Answers 1

  • If you check the documentation for the colorpicker library you'll see this option:

    .colorpicker('setValue', value)
    Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.

    As such, you can use that method to set the color when the rest button is clicked:

    $("#resetcolor").click(function(e) {
      $('#colorPicker').colorpicker('setValue', '#444444');

    Updated Fiddle

Related Articles