Validation of radio button group using jQuery validation plugin

Question

How to perform validation for a radio button group  one radio button should be selected  using jQuery validation plugin

User · Answer

use the following rule for validating radio button group selection  myRadioGroupName    required  true    myRadioGroupName is the value you have given to name attribute

User · Answer

Puts the error message on top            lt style gt      radio-group         position relative  margin-top 40px          myoptions-error        position absolute        top  -25px           lt  style gt      lt div class  radio-group  gt     lt input type  radio  name  myoptions  value  blue  class  required  gt  Blue lt br   gt     lt input type  radio  name  myoptions  value  red  gt  Red lt br   gt     lt input type  radio  name  myoptions  value  green  gt  Green  lt  div gt    lt  div gt  lt  -- end radio-group -- gt

User · Answer

code for radio button -   lt div gt   lt span class  radio inline  style  margin-right  10px   gt  Html RadioButton  Gender    Female  false  Female lt  span gt   lt span class  radio inline  style  margin-right  10px   gt  Html RadioButton  Gender    Male  false  Male lt  span gt                                                           lt div class  GenderValidation  style  color  ee8929   gt  lt  div gt       lt  div gt     lt input class  btn btn-primary  type  submit  value  Create  id  create   gt    and jQuery code-   lt script gt        document  ready function                  create   click function                 var gender     Gender   val                if      Gender checked   length    0                       GenderValidation   text  Gender is required                     return false                                     lt  script gt

User · Answer

With newer releases of jquery  1 3  I think   all you have to do is set one of the members of the radio set to be required and jquery will take care of the rest    lt input type  radio  name  myoptions  value  blue  class  required  gt  Blue lt br   gt   lt input type  radio  name  myoptions  value  red  gt  Red lt br   gt   lt input type  radio  name  myoptions  value  green  gt  Green   The above would require at least 1 of the 3 radio options w  the name of  my options  to be selected before proceeding   The label suggestion by Mahes  btw  works wonderfully

User · Answer

Another way to validate is like this   var  radio      input radio name  nameRadioButton       radio addClass  validate required       I hope my example will help you

User · Answer

With newer releases of jquery  1 3  I think   all you have to do is set one of the members of the radio set to be required and jquery will take care of the rest    lt input type  radio  name  myoptions  value  blue  class  required  gt  Blue lt br   gt   lt input type  radio  name  myoptions  value  red  gt  Red lt br   gt   lt input type  radio  name  myoptions  value  green  gt  Green   The above would require at least 1 of the 3 radio options w  the name of  my options  to be selected before proceeding   The label suggestion by Mahes  btw  works wonderfully

User · Answer

Puts the error message on top            lt style gt      radio-group         position relative  margin-top 40px          myoptions-error        position absolute        top  -25px           lt  style gt      lt div class  radio-group  gt     lt input type  radio  name  myoptions  value  blue  class  required  gt  Blue lt br   gt     lt input type  radio  name  myoptions  value  red  gt  Red lt br   gt     lt input type  radio  name  myoptions  value  green  gt  Green  lt  div gt    lt  div gt  lt  -- end radio-group -- gt

User · Answer

Another way to validate is like this   var  radio      input radio name  nameRadioButton       radio addClass  validate required       I hope my example will help you

User · Answer

You can also use this    lt fieldset gt   lt input type  radio  name  myoptions    value  blue  gt  Blue lt br   gt   lt input type  radio  name  myoptions    value  red  gt  Red lt br   gt   lt input type  radio  name  myoptions    value  green  gt  Green lt br   gt   lt label for  myoptions    class  error  style  display none   gt Please choose one  lt  label gt   lt  fieldset gt    and simply add this rule  rules      myoptions      required true       Mention how to add rules

User · Answer

As per Brandon s answer  But if you re using ASP NET MVC which uses unobtrusive validation  you can add the data-val attribute to the first one  I also like to have labels for each radio button for usability    lt span class  field-validation-valid  data-valmsg-for  color  data-valmsg-replace  true  gt  lt  span gt   lt p gt  lt input type  radio  name  color  id  red  value  R  data-val  true  data-val-required  Please choose one of these options    gt   lt label for  red  gt Red lt  label gt  lt  p gt   lt p gt  lt input type  radio  name  color  id  green  value  G   gt   lt label for  green  gt Green lt  label gt  lt  p gt   lt p gt  lt input type  radio  name  color  id  blue  value  B   gt   lt label for  blue  gt Blue lt  label gt  lt  p gt

User · Answer

You can also use this    lt fieldset gt   lt input type  radio  name  myoptions    value  blue  gt  Blue lt br   gt   lt input type  radio  name  myoptions    value  red  gt  Red lt br   gt   lt input type  radio  name  myoptions    value  green  gt  Green lt br   gt   lt label for  myoptions    class  error  style  display none   gt Please choose one  lt  label gt   lt  fieldset gt    and simply add this rule  rules      myoptions      required true       Mention how to add rules

User · Answer

I had the same problem  Wound up just writing a custom highlight and unhighlight function for the validator  Adding this to the validaton options should add the error class to the element and its respective label            highlight   function  element  errorClass  validClass                if   element  attr  type       radio                      element form  find  input type radio    each function which                         element form  find  label for     this id        addClass errorClass                         this  addClass errorClass                                     else                     element form  find  label for     element id        addClass errorClass                     element  addClass errorClass                                     unhighlight   function  element  errorClass  validClass                if   element  attr  type       radio                      element form  find  input type radio    each function which                         element form  find  label for     this id        removeClass errorClass                         this  removeClass errorClass                                    else                     element form  find  label for     element id        removeClass errorClass                     element  removeClass errorClass

User · Answer

I had the same problem  Wound up just writing a custom highlight and unhighlight function for the validator  Adding this to the validaton options should add the error class to the element and its respective label            highlight   function  element  errorClass  validClass                if   element  attr  type       radio                      element form  find  input type radio    each function which                         element form  find  label for     this id        addClass errorClass                         this  addClass errorClass                                     else                     element form  find  label for     element id        addClass errorClass                     element  addClass errorClass                                     unhighlight   function  element  errorClass  validClass                if   element  attr  type       radio                      element form  find  input type radio    each function which                         element form  find  label for     this id        removeClass errorClass                         this  removeClass errorClass                                    else                     element form  find  label for     element id        removeClass errorClass                     element  removeClass errorClass

User · Answer

As per Brandon s answer  But if you re using ASP NET MVC which uses unobtrusive validation  you can add the data-val attribute to the first one  I also like to have labels for each radio button for usability    lt span class  field-validation-valid  data-valmsg-for  color  data-valmsg-replace  true  gt  lt  span gt   lt p gt  lt input type  radio  name  color  id  red  value  R  data-val  true  data-val-required  Please choose one of these options    gt   lt label for  red  gt Red lt  label gt  lt  p gt   lt p gt  lt input type  radio  name  color  id  green  value  G   gt   lt label for  green  gt Green lt  label gt  lt  p gt   lt p gt  lt input type  radio  name  color  id  blue  value  B   gt   lt label for  blue  gt Blue lt  label gt  lt  p gt

User · Answer

use the following rule for validating radio button group selection  myRadioGroupName    required  true    myRadioGroupName is the value you have given to name attribute

User · Answer

code for radio button -   lt div gt   lt span class  radio inline  style  margin-right  10px   gt  Html RadioButton  Gender    Female  false  Female lt  span gt   lt span class  radio inline  style  margin-right  10px   gt  Html RadioButton  Gender    Male  false  Male lt  span gt                                                           lt div class  GenderValidation  style  color  ee8929   gt  lt  div gt       lt  div gt     lt input class  btn btn-primary  type  submit  value  Create  id  create   gt    and jQuery code-   lt script gt        document  ready function                  create   click function                 var gender     Gender   val                if      Gender checked   length    0                       GenderValidation   text  Gender is required                     return false                                     lt  script gt

[jquery] Validation of radio button group using jQuery validation plugin

Examples related to jquery

Examples related to validation