htmlのカスタムラジオボタンに必要な属性

Question

私はカスタムラジオボタンを使用しています。それにrequired属性も追加されました。

必須作業が、ERRORラジオを選択せず​​に提出されていませ....

フォームを示されていない....

しかし

「のいずれかのオプションを選択してください

エラーは表示されません。。

コードは次のとおりです。

<form> 
<div class="form-field-label">Change In Weight :</div> 
      <div class="form-field-input"> 

    <input type="radio" name="change_in_weight" id="change_in_weight1" required value="Maintained" class='radiobutton'><label for="change_in_weight1" class='radiobutton-label'>Maintained</label><br> 
    <input type="radio" name="change_in_weight" id="change_in_weight2" value="Increasing abnormally since last one year" class='radiobutton'><label for="change_in_weight2" class='radiobutton-label'>Increasing abnormally since last one year</label><br> 
    <input type="radio" name="change_in_weight" id="change_in_weight3" value="Decreasing abnormally since last one year" class='radiobutton'><label for="change_in_weight3" class='radiobutton-label'>Decreasing abnormally since last one year</label><br> 
       </div> 
<br> 
<input type="submit" value="send"> 
</form> 

CSS：

.radiobutton-label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    font-size: 15px; 
} 

input[type="radio"] { 
display:none; 
margin: 10px; 
} 

.radiobutton-label:before { 
    content:""; 
    display: inline-block; 
    width: 24px;  
    height: 24px; 
    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottom: 1px; 
} 
input[type=radio] + label:before { 
    background: url('http://drdilipgadgil.com/img/vlad.png') 2px 4px no-repeat; 
} 

input[type=radio]:checked + label:before { 
    background: url('http://drdilipgadgil.com/img/vlad.png') 2px -18px no-repeat; 
} 
:required:focus { 
    box-shadow: 0 0 6px rgba(255,0,0,1); 
} 

ここでは、カスタムのラジオボタンの場合はJSFIDDLE

Answer 1

である、あなたは別にエラーケースを処理する必要があります。ラジオボタンが表示されないため、エラーが表示されません。ラジオボタンに 'display：block'を指定すると、送信後にエラーが表示されます。だから、あなたは2つの解決策に行くことができます。

OR

JSを経由してハンドルエラーケースをデフォルトのラジオボタンを保ち、およびカスタムメッセージを表示します。

Answer 2

ボタンをクリックしてラジオボタンが空（何も選択されていない）のときにjavascriptでいくつかの機能を試してみてください。 （たとえば、単にアラートを使ってテストするだけ）