jquery-validate - カスタムラジオボタンをjQueryで検証する方法

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

これは、デフォルトのラジオボタンが非表示になっているためだと思います。

これらのカスタム ラジオ入力でこのフォームを検証するにはどうすればよいですか?