Validating a single radio button is not working in available javascript validation script

Question

I have randomly generated radio button series like

<input type="radio" name="creatorusers" value="1">
<input type="radio" name="creatorusers" value="1">
<input type="radio" name="creatorusers" value="1">
<input type="radio" name="creatorusers" value="1">
.....so on

But I get only ONE radio button and execute the javascript validation given for it to chk whether the radio button is selected or not, then it doesnt work Ples help me out in resolving this.

mycreator = -1;

  for (i=frm.creatorusers.length-1; i > -1; i--) {
  if (frm.creatorusers[i].checked) {
  mycreator = i; i = -1;
  }
  }
  if (mycreator == -1) {
  alert("You must select a Creator User!");
  return false;
  }

when i alert the "frm.creatorusers.length" i get alert as "undefined" but at other side when there more than on radio button then this validation works fine — OM The Eternity
– OM The Eternity, Commented Jan 1, 2011 at 12:34

Community · Accepted Answer · 2017-05-23 12:26:56Z

5

Always (!) use the var keyword. Otherwise your variables will be in the global scope (yes, even those in function bodies), which can make for some bugs that are hard to track down.

As @Felix pointed out, creatorusers will only be an array if there is more than one element with that name in the form. You can create a single-element array when necessary to work around that.

Here is an abstracted function that can validate an arbitrary checkbox list.

function ensureChecked(checkboxes, error) {
  if (checkboxes) {
    var cbx = (checkboxes.length > 0) ? checkboxes : [checkboxes]; 
    for (var i=0; i<cbx.length; i++) {
      if (cbx[i].checked) {
        return true;
      }
    }
    alert(error);
  }
  return false;
}

call as

ensureChecked(frm.creatorusers, "You must select a Creator User!");

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jan 1, 2011 at 12:50

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

OM The Eternity Over a year ago

I get this error: frm.creatorusers is undefined [Break On This Error] var rdo = (frm.creatorusers.length >...rm.creatorusers : frm.creatorusers; in firebug

Tomalak Over a year ago

@OMThe: This means that frm.creatorusers is undefined (duh). Obviously there is not aleways a form field with this name. Just check if it exists beforehand. (It also means that you are not really using my code, but something else. I don't understand why you accepted my answer then, and why you un-accepted it as your code stopped working.)

mplungjan Over a year ago

Make sure to pass the form!!! onsubmit="return validate(this)" - this will also make naming the form unnecessary. If you however use document.getElementById("ID_OF_FORM") make sure the form HAS an ID and not just a name. IE will allow getElementById("NAME_OF_FORM") but other browsers will not

Felix Kling · Accepted Answer · 2011-01-01 12:46:43Z

3

Ah now I got. If you only have one radio button, then frm.creatorusers is not an array. Just skip it:

var mycreator = -1;
var checked = false;

if(typeof frm.creatorusers.length === 'number') {
    for (var i=frm.creatorusers.length; i--; ) {
      if (frm.creatorusers[i].checked) {
          mycreator = i;
          checked = true;
          break;
      }
    }
}
else if(frm.creatorusers.checked){
    mycreator = //? what here?
    checked = true;
}

if(!checked) {
     alert("You must select a Creator User!");
     return false;
}

If mycreator was just for checking whether a button was selected or not, you can completely remove it from the code above.

Some further notes to your code:

Always declare variables with var, otherwise they will be global.
Use break to end a loop.
Maybe it is just because of copy and paste, but having a lot of radio buttons with the same value does not make much sense.

edited Jan 1, 2011 at 12:46

answered Jan 1, 2011 at 12:40

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

OM The Eternity Over a year ago

kling answer for ur last point, its just sample hence its just a copy paste, Secondly ur code is not is not working, It always give the msg "You must select a Creator User!"

Felix Kling Over a year ago

@OMThe Eternity: The code works for me: jsfiddle.net/fkling/TbNux There is probably something else wrong.

mplungjan · Accepted Answer · 2011-01-11 08:29:32Z

2

You can do something like this:

function validate(frm){
    var isChecked = false;

    for (var i=0; i<frm.elements.length; i++)
    {
       if (frm.elements[i].type === 'radio'){
         if (frm.elements[i].checked === true){
           isChecked = true;
           break;
         }
       }
    }

    if (isChecked === true){
       return true;
    }
    else{
       alert('You should select an option first !');
    }
}

Now you should call above function on onsubmit event of the form:

<form onsubmit="return validate(this);">

Now the validate function will make sure that at least one radio button is checked otherwise it won't submit.

edited Jan 11, 2011 at 8:29

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jan 1, 2011 at 12:36

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

3 Comments

Tomalak Over a year ago

Identity comparison is nice and all, but could it be that you are overdoing it? :) E.g. isChecked can never be anything but boolean in your code, so return isChecked is a safe bet. Also, what is j?

OM The Eternity Over a year ago

Whee doies the "j" come from?

mplungjan Over a year ago

I edited your answer to pass the form in the function and not use getElementById in case there IS no ID on the form. See other comment of mine on this page

mArkO · Accepted Answer · 2011-03-25 23:08:22Z

1

this should do it

function isRadioSelected(btn) {

    if(typeof btn.length === 'number') {
        for(var i=0;i<btn.length;i++)
            if(btn[i].checked) return true

    }else{
        if(btn.checked) return true
    }

    return false

}

edited Mar 25, 2011 at 23:08

user142162

answered Mar 25, 2011 at 16:28

mArkO

111 bronze badge

Comments

DarthJDG · Accepted Answer · 2011-06-27 12:05:00Z

1

You could try something like this instead:

<html>
<head>
<script type="text/javascript">     
function confirmsubmit() {
       var btn = document.formname.buttonname

       if (btn.checked == false) 
       {
        window.alert("You did not click the button.");
        btn.focus();
        return false;
        }

        return true;
}
</script>
</head>

<body>

<form method="post" action="mailto:[email protected]" 
name="formname" onsubmit="return confirmsubmit();">
click here: <input type="radio" name="buttonname"><br />

    <p><input type="submit" value="Submit" name="submit"></p>

</form>

</body>
</html>

edited Jun 27, 2011 at 12:05

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

answered Jun 26, 2011 at 23:30

WhyGht Mic.

111 bronze badge

Collectives™ on Stack Overflow

Validating a single radio button is not working in available javascript validation script

5 Answers 5

3 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related