Question

表格

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

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

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

Answer 1

要对隐藏字段执行验证，您需要使用空数组

覆盖默认的“忽略”设置

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

据推测，你有充分的理由想要一个用户看不到的单选按钮。例如，在验证分布在多个jquery ui选项卡上的表单时，在提交表单时可能会隐藏某些字段。

不要在文档准备就绪时调用两次验证 - 虽然没有任何损害，但第二次调用不会有太大作用。

如何jQuery验证自定义单选按钮

1 个答案: