Question

我正在使用自定义单选按钮。还添加了必需的属性。

必需正在运行但ERROR未显示....

没有选择收音机就不会提交表格....

但是

＆＃34;请选择其中一个选项＆＃34;

错误未显示。

代码是：

<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

对于自定义单选按钮，您必须单独处理错误情况。错误未显示，因为单选按钮被隐藏。如果您提供＆＃39; display：block＆＃39;对于单选按钮，您可以在提交后看到错误。所以你可以选择两个解决方案。

保留默认单选按钮

OR

通过JS处理错误案例，并显示自定义消息。

Answer 2

当单击按钮并且单选按钮为空（没有选中）时，只需尝试在javascript中创建一些函数，只显示任何div或任何你想要的错误。（例如，只使用警报来简单地测试它）

Answer 3

我知道我来晚了，但是由于我遇到了同样的问题，并且已经在该线程中查找并it绊绊，所以我想说这是一条路。

1-不要隐藏实际的单选按钮（不要设置display :hidden;

2-将其透明度设为0，并将其位置设为绝对

----对我来说很好

opacity: 0;
position: absolute;

Here is JSFIDDLE

html中自定义单选按钮的必需属性

3 个答案: