Validate Radiobutton with jQuery

Asked

Viewed 9,506 times

3

I would like to do a validation via jQuery, to know if the client has selected some RadioButton

Jsfiddle Demo

It displays an Alert if it has not selected, but it still sends (submited), it should not.

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');
    }
 }
  • Missed giving preventDefault click generated event when you do not want to submit the form. Additionally you need to declare the event as a function parameter.

  • I added relevant parts of the code to the question to facilitate understanding.

2 answers

3


You can put a return false after the 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;
   }
}

There is one more error in the script, the name of the field

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

Change to

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

Jsfiddle

  • 1

    This solution worked for my case was also with the same difficulty in validating the Radiobutton in my case also missed to give a Return false in function.

1

Test like this:

 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/

The difference is now I hear the submit form and in case of error return false;

  • +1 - my answer was ready, so I published :)

  • @abfurlan, thank you. Your answer is good too, however I prefer to have form submit, will not be pressed with keyboard.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.