3

Gostaria de fazer uma validação via jQuery, para saber se o cliente selecionou algum RadioButton

JSFiddle Demo

Ele exibe um alert caso não tenha selecionado, mas ele ainda envia (submited), não deveria.

HTML

 <table id="RadioButtonList1" cellspacing="15" cellpadding="15">
    <tr>
        <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_0">opc 01</label></td>
    </tr><tr>
        <td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_1">opc 02</label></td>
    </tr><tr>
        <td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="3" /><label for="RadioButtonList1_2">opc 03</label></td>
    </tr><tr>
        <td><input id="RadioButtonList1_3" type="radio" name="RadioButtonList1" value="4" /><label for="RadioButtonList1_3">opc 04</label></td>
    </tr><tr>
        <td><input id="RadioButtonList1_4" type="radio" name="RadioButtonList1" value="5" /><label for="RadioButtonList1_4">opc 5</label></td>
    </tr>
</table>
<input type="submit" name="Button1" value="Votar" id="Button1" class="btn btn-primary" />

JS

 jQuery(function(){
    jQuery('#Button1').bind('click',checkRadio);
 })

 function checkRadio() {
    var isChecked = jQuery("input[name=fileType]:checked").val();
    var booleanVlaueIsChecked = false;
    if (!isChecked) {
        booleanVlaueIsChecked = true;
        alert('Selecione algum logotipo');
    }
 }
2
  • Faltou dar preventDefault no evento gerado pelo click quando não quiser submeter o formulário. Além disso precisa declarar o evento como parâmetro da função.
    – Wakim
    Commented 30/06/2014 às 17:37
  • Adicionei partes relevantes do código na pergunta, para facilitar o entendimento.
    – abfurlan
    Commented 30/06/2014 às 17:53

2 Respostas 2

3

Você pode colocar um return false depois do alert:

jQuery(function(){
   jQuery('#Button1').bind('click',checkRadio);
});

function checkRadio() {
   var isChecked = jQuery("input[name=RadioButtonList1]:checked").val();
   var booleanVlaueIsChecked = false;
   if (!isChecked) {
       booleanVlaueIsChecked = true;
       alert('Selecione algum logotipo');
       return false;
   }
}

Tem mais um erro no script, o nome do campo

var isChecked = jQuery("input[name=fileType]:checked").val();

Altere para

var isChecked = jQuery("input[name=RadioButtonList1]:checked").val();

JSFiddle

1
  • 1
    Esta solução funcionou para o meu caso também estava com a mesma dificuldade em validar os RadioButton no meu caso também faltou dar um Return false na função.
    – wilder
    Commented 12/05/2020 às 19:47
1

Teste assim:

 jQuery(function () {
     jQuery('#form1').on('submit', checkRadio);
 })

 function checkRadio() {
     var isChecked = jQuery("input[name=fileType]:checked").val();

     var booleanVlaueIsChecked = false;
     if (!isChecked) {
         booleanVlaueIsChecked = true;
         alert('Selecione algum logotipo');
         return false;
     }
 }

http://jsfiddle.net/6xs5x/1/

A diferença é que agora eu escuto o submit da form e no caso de dar erro faço return false;

2
  • +1 - minha resposta estava pronta, por isso publiquei :)
    – abfurlan
    Commented 30/06/2014 às 17:46
  • @abfurlan, obrigado. A sua resposta é boa também, porem eu prefiro ter certeza que é no form submit, não vá o botão ser carregado com teclado.
    – Sergio
    Commented 30/06/2014 às 18:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .