Radio button validation in javascript

Question

Need to validate a radio button input  i e  when submit button is pressed and no radio buttons have been selected  it alerts the user saying  please select a check box   and if a radio button has been selected then simply submit the form  needs no alert   Can only use HTML CSS and JavaScript for this  I know it s 1000 times easier in jquery but sadly I can t use that    And I know my HTML isn t valid  but unless it directly affects my current problem then I ll handle it later    lt form name  form1  action     onsubmit  return validateForm    method  post  gt        First time visitor   lt br  gt               lt label for  s1  gt Yes lt  label gt               lt input type  radio  id  1  name  yesno  value  1   gt               lt br  gt               lt label for  s2  gt No lt  label gt               lt input type  radio  id  1  name  yesno  value  2   gt                lt br  gt               lt input type  submit  value  Submit  gt  lt br  gt       lt  form gt    Any pointers are greatly appreciated  thanks

User · Answer

document forms   forms1    onsubmit   function         return    some call  this elements  function  el             return el type      radio    el checked   false             Just something out of my head  Not sure the code is working

User · Answer

1st  If you know that your code isn t right  you should fix it before do anything   You could do something like this   function validateForm         var radios   document getElementsByName  yesno        var formValid   false       var i   0      while   formValid  amp  amp  i  lt  radios length            if  radios i  checked  formValid   true          i                       if   formValid  alert  Must check some option         return formValid       See it in action  http   jsfiddle net FhgQS

User · Answer

lt form action    method  post  name  register form  id  register form  enctype  multipart form-data  gt        lt div class  text-input  gt           lt label gt Gender   lt  label gt           lt input class  form-control  type  radio  name  gender  id  male  value  male    gt           lt label for  male  gt Male lt  label gt           lt input class  form-control  type  radio  name  gender  id  female  value  female    gt           lt label for  female  gt Female lt  label gt       lt  div gt       lt div class  text-input  align  center  gt           lt input type  submit  name  register  value  Submit  onclick  return radioValidation       gt       lt  div gt    lt  form gt    lt script type  text javascript  gt      function radioValidation             var gender   document getElementsByName  gender            var genValue   false           for var i 0  i lt gender length i                 if gender i  checked    true                   genValue   true                                      if  genValue               alert  Please Choose the gender                return false                    lt  script gt    Source  http   chandreshrana blogspot in 2016 11 radio-button-validation-in-javascript html

User · Answer

You could do something like this  var option document getElementsByName  Gender     if    option 0  checked    option 1  checked         alert  Please Select Your Gender        return false

User · Answer

Full validation example with javascript    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt           lt title gt Radio button  full validation example with javascript lt  title gt           lt script gt              function send                     var genders   document getElementsByName  gender                    if  genders 0  checked    true                        alert  Your gender is male                      else if  genders 1  checked    true                        alert  Your gender is female                      else                          no checked                     var msg     lt span style  color red   gt You must select your gender  lt  span gt  lt br   gt  lt br   gt                        document getElementById  msg   innerHTML   msg                      return false                                    return true                             function reset msg                     document getElementById  msg   innerHTML                              lt  script gt       lt  head gt       lt body gt           lt form action    method  POST  gt               lt label gt Gender  lt  label gt               lt br   gt               lt input type  radio  name  gender  value  m  onclick  reset msg       gt Male              lt br   gt               lt input type  radio  name  gender  value  f  onclick  reset msg       gt Female              lt br   gt               lt div id  msg  gt  lt  div gt               lt input type  submit  value  send gt  gt   onclick  return send       gt           lt  form gt       lt  body gt   lt  html gt    Regards   Fernando

User · Answer

In addition to the Javascript solutions above  you can also use an HTML 5 solution by marking the radio buttons as required in the markup   This will eliminate the need for any Javascript and let the browser do the work for you   See HTML5  How to use the  quot required quot  attribute with a  quot radio quot  input field for more information on how to do this well

[javascript] Radio button validation in javascript

Examples related to javascript

Examples related to validation

Examples related to client-side-validation