Question

HTML

<table class="tbl" cellpadding="6" cellspacing="0">
     <tr>
     <td style="color:rgba(0,0,0,0.5); font-weight:300">Gender</td>
     <td>&nbsp;</td>
     <td>
    <input type="radio" id="radio01" name="gender" value="male" required/>
    <label for="radio01"><span></span>Male</label>
    </td>
    <td>
    <input type="radio" id="radio02" name="gender" value="female" required/>
    <label for="radio02"><span></span>Female</label>
    </td>
    </tr>
</table>`

CSS

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

    input[type="radio"] + label {
        color: #000;
        font-family:Arial, sans-serif;
        font-size:16px;
        color: #000;
        padding-right:50px;
    }

    input[type="radio"] + label span {
        display:inline-block;
        width:5px;
        height:10px;
        margin:-3px 8px 0 0;
        vertical-align:middle;
        cursor:pointer;
        -moz-border-radius:  50%;
        border-radius:  50%;
        background-color:#aaa;
    }

    input[type="radio"]:checked + label span{
         background-color:#00695c;
    }

    input[type="radio"] + label span,
    input[type="radio"]:checked + label span {
      -webkit-transition:background-color 0.4s linear;
      -o-transition:background-color 0.4s linear;
      -moz-transition:background-color 0.4s linear;
      transition:background-color 0.4s linear;
    }

JQuery函数

  $(function() {
     $("form[name='userDetailsForm']").validate({
         rules: {
             gender: {
                 required: true
             }
         },
         messages: {
             gender: {
                 required: "Please specify your gender"
             }
         }
     });
 });

注意：脚本中没有错误。我能够验证我当前在我的表单中使用的其他字段，除了单选按钮。我还有另外两套类似的单选按钮，但问题相同。我希望这些单选按钮至少可以用于“必需”，即HTML5验证。

Answer 1

你可以评论这些代码行

AlarmManager

并验证表格

Answer 2

而不是使用它：

`input[type="radio"] { display:none;}`

这可以使用，以后可以验证：

`input[type="radio"] { visibility:hidden;}`

无法在HTML5，jquery中验证跨度单选按钮

2 个答案: