The required attribute doesn’t work for the color input type in Google Chrome 8 and Safari 5 – the WebKit browsers. Consider the following code:

1
2
3

<input type="text" name="c" id="c" required placeholder="Enter Color">
<button type="button"
  onclick="alert(document.getElementById('c').validity.valid)">check</button>

Clicking the Check button before filling in the field results in a “false” alert. That is correct as the required attribute indicates that the field must be filled out.

Now change the type from “text” to “color” like so:

1
2
3

<input type="color" name="c" id="c" required placeholder="Enter Color">
<button type="button"
  onclick="alert(document.getElementById('c').validity.valid)">check</button>

Again, click the Check button before filling in the field. Now the alert reads “true.” And that is a bug.

I tested the same thing in Opera 10.6 and Firefox 4 (beta) and both appropriately alert “false” when the color field is left empty.