Javascript form validation checkbox and radio not working

Question

I have a form that I need to validate with javascript to make sure at least one checkbox and one radio is checked. I know it would probably be easier to use jQuery but I'm trying to accomplish this with pure javascript. Here is the code:

<form name="bulbform" action="compute.php"  onsubmit=" return validateForm()" method="post">
<p>Enter your name: <input type="text" name="name" size="20"></p>
<p><strong>Light Bulbs</strong></p>
<label><input type="checkbox" name="bulbs[]" value="2.39">Four 25-watt light bulbs for  $2.39</label><br>
<label><input type="checkbox" name="bulbs[]" value="4.29">Eight 25-watt light bulbs for  $4.29</label><br>
<label><input type="checkbox" name="bulbs[]" value="3.95">Four 25-watt long-life light bulbs $3.95</label><br>
<label><input type="checkbox" name="bulbs[]" value="7.49">Eight 25-watt long-life light bulbs $7.45</label><br>
<p><strong>Payment Method</strong></p>
<label><input type="radio" name="cc" value="Visa">Visa</label><br>
<label><input type="radio" name="cc" value="Master Card">Master Card</label><br>
<label><input type="radio" name="cc" value="Discover">Discover</label><br>
<p><input type="submit" value="Order" /> <input type="reset" value="Clear form"/></p></form>

Here is my javascript

  var radios = document.getElementsByTagName('input');
  var value;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
      // get value, set checked flag or do whatever you need to
      value = radios[i].value;
      alert(value);
      return true;
    }
    else{
      alert("You must select a payment method.")
      return false;
    }

With the else removed I'm able to show the credit card selected but when I add the else it always says you must select a payment method and is never true... Thanks ahead of time for any advice you can give.

you can put the attribute checked in radio button to keep one checked. — Mahesh Bansod
– Mahesh Bansod, Commented Nov 6, 2016 at 13:57
It recognized when don't have one checked if the "else" is removed. So you are saying set the default checked state so it is true regardless if they have checked on or not? — yaksushi
– yaksushi, Commented Nov 6, 2016 at 14:10

Dan Wilson · Accepted Answer · 2016-11-06 14:10:38Z

1

See this plunker: https://plnkr.co/edit/5NiIA1w9axvmOJEjXVlP

function validateForm() {

  var radios = document.getElementsByTagName('input');
  var value;
  var paymentMethodSelected = false;

  for (var i = 0; i < radios.length; i++) {

    if (radios[i].type === 'radio' && radios[i].checked) {
      // get value, set checked flag or do whatever you need to
      value = radios[i].value;
      alert(value);
      paymentMethodSelected = true;
    }

  }

  if (!paymentMethodSelected) {
    alert("You must select a payment method.");
    return false;
  }

  return true;

}

You don't have an ending form tag (not critical, but good practice)
You were returning from the validation function before you had checked all radio buttons
The check for an invalid form state should be handled outside the for loop

answered Nov 6, 2016 at 14:10

Dan Wilson

4,0472 gold badges19 silver badges29 bronze badges

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

Comments

Mahesh Bansod · Accepted Answer · 2016-11-07 05:21:11Z

1

The variable radios contains checkboxes, textbox, and radio buttons. A radio button and a textbox are not checkbox.
So the condition radios[i].type=='radio' && radios.type='checked' will evaluate to false and the else part will be evaluated.

The code below uses the variables checkedCB and checkedRadio to store if any checkbox or radio button is checked.

Try something like this:

function validateForm() {
  var inputs = document.getElementsByTagName('input');
  var valued;
  var checkedCB=false,checkedRadio=false;
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
            checkedCB=true;
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
        checkedRadio=true;
    }
    if(checkedRadio && checkedCB) return true;
  }
  alert("You must select atleast one light bulb and a payment method.");
  return false;
}

And you can put the attribute checked in any one radio button. i.e.

<label><input type="radio" name="cc" value="Visa" checked>Visa</label><br>

edited Nov 7, 2016 at 5:21

answered Nov 6, 2016 at 14:12

Mahesh Bansod

2,0753 gold badges33 silver badges52 bronze badges

3 Comments

yaksushi Over a year ago

This works well for the radio so I tried to apply the same concept to the checkboxes but it breaks the validation. How can it be applied as well to the checkboxes?

yaksushi Over a year ago

The code you posted above is pretty much how I tried to adapt your original code. This does not work, with no checkboxes checked it is still true.

yaksushi Over a year ago

Your code works you just forgot to update for (var i = 0; i < radios.length; i++) to for (var i = 0; i < inputs.length; i++)

Md Mahabubur Rahman · Accepted Answer · 2016-11-06 14:27:33Z

0

If you would like to make sure at least one checkbox and one radio is checked before form submit then, you could introduce counters variable in your scripts that will count how many check box and radio button checked inside of the loop.

And before return just check at least one checkbox and one radio selected as follow:

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

Your validateForm() function full script could like following one:

function validateForm(){
var inputs = document.getElementsByTagName('input');
var radio_checked_count=0;
var checkbox_checked_count=0;
var i;
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox"&&inputs[i].checked) {
    checkbox_checked_count++;
}
if (inputs[i].type == "radio"&&inputs[i].checked) {
    radio_checked_count++;
}   
}  

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

}

answered Nov 6, 2016 at 14:27

Md Mahabubur Rahman

7361 gold badge6 silver badges19 bronze badges

1 Comment

Md Mahabubur Rahman Over a year ago

Please let me know if above scripts doesn't resolve your issue. Thanks

Bruce Wong · Accepted Answer · 2016-11-06 14:33:12Z

0

Here is what your javascript is doing.

It checks the first radio button, finds that it is NOT checked so it executes the else statement and alerts that you must choose a card or whatever. Then it hits the return false statement and exits the loop (doesn't matter what it's returning, a return statement will exit the loop). That's all.

If you had checked the first checkbox using an attribute checked, it will find that the first radio button IS checked and then alert it and return out of the loop without checking the rest. Your for loop is not closed in the question if you want to edit it.

answered Nov 6, 2016 at 14:33

Bruce Wong

254 bronze badges

Comments

user2575725 · Accepted Answer · 2016-11-06 14:43:54Z

You should prompt user for payment selection only after for-loop, try this code snippet:

function validateForm() {
  var payments = document.getElementsByName("cc");
  var count = payments.length;
  var selected = false;
  while (count--)
    if (selected = payments[count].checked)
      break;
  if (!selected) {
    alert('Choose payment method');
    return false;
  }
  return true;
}

<form name="bulbform" action="compute.php" onsubmit=" return validateForm()" method="post">
  <p><strong>Payment Method</strong>
  </p>
  <label>
    <input type="radio" name="cc" value="Visa">Visa</label>
  <br>
  <label>
    <input type="radio" name="cc" value="Master Card">Master Card</label>
  <br>
  <label>
    <input type="radio" name="cc" value="Discover">Discover</label>
  <br>
  <p>
    <input type="submit" value="Order" />
    <input type="reset" value="Clear form" />
  </p>

yaksushi · Accepted Answer · 2016-11-07 01:04:16Z

Thanks to Mahesh Bansod for the help I used their example and tweaked it to my needs. Below is my working validation code for a textbox, checkbox and radio.

function validateForm(){
  //check to make sure the name is not blank
  var cusName = document.forms["bulbform"]["name"].value;
  if (cusName == null || cusName == ""){
    alert("Your name must be filled out.");
    return false;
  }
  //check to see that atleast one radio and checkbox are checked
  var inputs = document.getElementsByTagName('input');
  var checkCheckBox=false, checkRadio=false; //set both rado and checkbox to false
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
      checkCheckBox=true; //set checkbox true if one is checked
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
      checkRadio=true; //set radio true if one is checked
    }
    if(checkRadio && checkCheckBox) return true; //if both are true return true
  }
  //if checkbox is false alert user and return false
  if(!checkCheckBox){
    alert("You must select atleast one item.");
    return false; //
  }
  //if radio is false alert user and return false
  if(!checkRadio){
    alert("You must select a payment method.");
    return false;
  }
}

Collectives™ on Stack Overflow

Javascript form validation checkbox and radio not working

6 Answers 6

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related