HTML5 Set input type="color" required

Question

I need to set required value for <input type="color"/>. I tried to add required="required" but it does not work. I think that it happens in this way because black is already set as default color. (Here required means that user must open color picker and choose necessary color even if it is black.)

Answer 1

Input type color picker's UI has no required features other than accepting simple colors as text. Color type always have value "black" as default. Anyway, you can validate via script.

var color = document.getElementById("color");
var inputColor = document.getElementById('colorCode');

//check color input if not empty print value
if (color.value) {
  inputColor.innerHTML = color.value;
}


color.addEventListener("change", function() {
  var code = this.value;
  inputColor.innerHTML = code;
})

<input id="color" type="color">

<p id="colorCode"></p>

Answer 2

This a workaround solution involving jquery.

var picked = false;

$("#color-picker").click(function(){
  picked = true;
});

function validateForm() {
  if (!picked) {
    //code to tell user they didn't pick a color e.g. alert("Please pick a color")
  }
  return picked;  
}

<form onsubmit="return validateForm()">
  <input type="color" id="color-picker"/>
  <input type="submit" value="submit"/>
</form>