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

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 eg alert("Please pick a color") } return picked; } 

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

Answer 2

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>