html中自定義單選按鈕的必需屬性

我正在使用自定義單選按鈕。還向它添加了必需的屬性。html中自定義單選按鈕的必需屬性

要求是工作，但錯誤沒有顯示....

形式沒有得到，而不選擇無線電提交....

但

「請選擇這些選項之一「

錯誤未顯示。

代碼：

<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

來源

2016-04-22 Dr M J

在自定義單選按鈕的情況下，你必須單獨處理錯誤情況。由於隱藏了單選按鈕，因此未顯示錯誤。如果您給出單選按鈕的「顯示：塊」，您可以在提交後看到錯誤。所以你可以選擇兩種解決方案。

保持默認的單選按鈕

處理錯誤的情況下通過JS，並顯示自定義消息。

來源

2016-04-22 07:08:51

只需點擊按鈕並單選按鈕爲空（沒有選中任何內容），只需在javascript中製作一些函數，只需在任何div或任何您想要的內容中顯示錯誤。（例如只使用警報來簡單地測試它）

來源

2016-04-22 08:23:46 Scarlet

html中自定義單選按鈕的必需屬性

回答

相關問題