HTML5入力タイプ=「色」が必要です

Question

<input type="color"/>の値を設定する必要があります。私はrequired="required"を追加しようとしましたが、動作しません。黒はすでにデフォルトの色として設定されているので、このように表示されると思います。 （ここでは、カラーピッカーを開いて黒でも必要な色を選択する必要があることを意味します）。

Answer 1

これは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>

Answer 2

入力タイプのカラーピッカーのUIは、テキストのような単純な色を受け入れる以外に必要な機能を持っていません。デフォルトでは、カラータイプは常に「黒」の値を持ちます。とにかく、スクリプトを使って検証することができます。

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

 
//check color input if not empty print value 
 
\t if(color.value){ 
 
\t \t \t \t inputColor.innerHTML = color.value; 
 
\t \t } 
 
\t \t 
 
\t \t 
 
color.addEventListener("change", function(){ 
 
    var code = this.value; 
 
\t \t inputColor.innerHTML = code; 
 
})

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

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