Javascript 无法验证HTML5、jquery中的span单选按钮

HTML

JQuery函数

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;
    }

---

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

您能对这些代码行进行注释吗

input[type=“radio”]{display:none；}

并验证表单，而不是使用以下内容：

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

这可用于以后的验证：

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

---

将html5验证保留为required，通过删除该元素的required属性进行检查，并检查通过jqueryvalidation pluginIt进行的验证是否在删除“required”后仍不起作用。检查示例单选按钮验证在这里是否起作用。这很有效！我没有使用

input[type=“radio”]{display:none；}

而是使用

input[type=“radio”]{visibility:hidden；}

来解决我的问题。干杯jQuery错误显示在单选按钮的第一个选项上。（例如：在“男性td”中，它表示“请指定性别”，并且在显示错误后，收音机不会为男性显示）我希望它位于相应tr的末尾。尝试了很多东西，但都没有效果。我怀疑CSS有问题>

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

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