Как 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 Validation

$().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, некоторые поля могут быть скрыты при отправке формы.

Не вызывайте подтверждение дважды на документе, готовый также - хотя он не навредит, нет смысла, что второй вызов не будет делать много.