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中自定义单选按钮的必需属性

回答

相关问题