0

表格

<form id="form_reg" name="form_reg" method="post" action="">
      <input type="radio" id="y" name="opt" value="y"><label for="y"><span>YES</span></label>
      <input type="radio" id="n" name="opt" value="n"><label for="n"><span>NO</span></label>
      <button id="reg_submit" value=" " type="submit"></button>
</form>

JS 验证

$().ready(function() {
  $("#form_reg").validate({
        rules: {
          opt:{
              required: true
          }
        },
        messages: {
          opt: {
              required: "Select one "
          }
        }
  });


  $("#form_reg").validate();
})

在我添加 CSS 之前，这很好用 

input[type="radio"] {
    display:none;
}
input[type="radio"] + label span {
    width:27px;
    height:25px;
    background:url(/images/radio.svgz) no-repeat;
    cursor:pointer;
}
input[type="radio"]:checked + label span {
    width:27px;
    height:25px;
    background:url(/images/radio_a.svgz) no-repeat;
    cursor:pointer;
}

我猜这是因为默认的单选按钮是隐藏的。

如何使用这些自定义单选输入验证此表单？

4

1 回答 1

3

要对隐藏字段执行验证，您需要使用空数组覆盖默认的“忽略”设置

$(function() {
  $("#form_reg").validate({
        ignore:[],
        rules: {
          opt:{
              required: true
          }
        },
        messages: {
          opt: {
              required: "Select one "
          }
        }
  });
});

大概您有充分的理由需要一个用户看不到的单选按钮。例如，当验证分布在多个 jquery ui 选项卡中的表单时，提交表单时可能会隐藏某些字段。

也不要在文档就绪时调用 validate 两次 - 尽管它没有害处，但第二次调用不会做太多事情是没有意义的。

于 2013-06-06T08:09:54.623 回答