Radio Buttons Validation

Question

0.00/5 (No votes)

See more:

Hi,

I have two radio (yes/no) buttons in my form.If the user didn't select any one of those and hit submit button yes and no text has to change to some color.

Is it possible? If it is can you suggest me using java script or jquery.

Posted 29-Jun-11 13:29pm

Member 8046452

Add a Solution

Comments

Peter_in_2780 29-Jun-11 23:08pm

By definition, you cannot have a set of Radio Buttons with none selected. There must be exactly one selected - that is what makes them radio buttons instead of checkboxes.

[no name] 29-Jun-11 23:39pm

Yes you can. Without default value the radiobuttons are not selected.

Peter_in_2780 30-Jun-11 0:03am

My bad :( Tools I used wouldn't let me turn them all off, but the standard apparently does.

Sergey Alexandrovich Kryukov 30-Jun-11 23:16pm

Not quite true. The radio buttons have the invariant: one and only one in the group is selected. This invariant is not held all the time. If a selection is not done in the code, this invariant can be violated in the following case: no one is selected. After the very first selection the invariant comes into play and is help thereafter.
--SA

3 solutions

Solution 1

Form Validation -
http://webdesign.about.com/od/forms/a/aa031599_3.htm

Regarding text color use css and set the properties while on error.(class attribute)
Hope this helps

Posted 29-Jun-11 16:13pm

harish85

Solution 3

You can try below JQuery code to achieve this:

$(document).ready(function() {
        $("#btn").click(function() {
            if ($("#rbtnList input:checked").size() == 0) {
                $("#rbtnList input").css({ "background-color": "#f00" });
            }
        });
    });

Here "btn" is the id of your button(on whose click event you want to do the validation) and "rbtnList" is the container (say a DIV) element around the radio buttons.

Hope this helps!

Posted 29-Jun-11 18:58pm

RakeshMeena

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ruard · Accepted Answer · 2011-06-29T17:20:00

Normally radiobuttons are grouped by name:

HTML

<form name="frm1">
 <input type="radio" name="sex" value="male" checked="checked" /> Male<br />
 <input type="radio" name="sex" value="female" /> Female
</form>

In this case you can only select male or female, but not both. Notice the checked attribute which allows us to set a default value. Returning no choice is now not possible.

In the following example I have added one group with a yes/no (radio1) and two seperate radiobuttons (radio2 and radio3).
Because radio2 and radio3 are not grouped (by name) you can select both. Normally this is not what you want so forget this, it's just for explanation. Therefor use the same name for the radiobuttons you want to group. Also use the checked attribute to set a default value.

In the form onsubmit validate the values. By using return you can cancel the submit action. In testvalues() the backgroundcolor is colored red if validation fails. When submit is pressed, all controls are colored red. See the code for further explanation.

HTML

<html>
<head>
<script type="text/javascript"></script></head></html>

JavaScript

function testvalues()
{
  // Get the group, this returns an HTMLCollection
  var radio1 = document.forms["frm1"]["radio1"];
  // or like this
  var radio2 = document.getElementsByName('radio1');

  // This will return the input element (not part of a group)
  if (!document.forms["frm1"]["radio2"].checked)
    document.forms["frm1"]["radio2"].style.background="red";
  // This will return the input element (not part of a group)
  if (!document.forms["frm1"]["radio3"].checked)
    document.forms["frm1"]["radio3"].style.background="red";

  // radio1 is an HTMLcollection
  if (!radio1[0].checked && !radio1[1].checked)
  {
    var labelanswer = document.getElementById('labelanswer');
    if (labelanswer != null)
    {
      // change the color of the entire line (span)
      labelanswer.style.background="red";
    }
    // or the input only
    radio1[0].style.background="orange";
    radio1[1].style.background="orange";
    // validation failed so cancel submit. Script exits here
    return false;
  }
  // validated, go to action page
  return true;
}

HTML

<body>

Question 1.<br />
<form name="frm1"  önsubmit="return testvalues();">
<span id="labelanswer">Answer: 
Yes<input type="radio" name="radio1" id="Radio1Yes" value="yes" />
No<input type="radio" name="radio1" id="Radio2No" value="no" /></span><br />
Yes <input type="radio" name="radio2" id="Radio2Yes" value="yes" />
No <input type="radio" name="radio3" id="Radio3No" value="no" />
<input type="submit" value="Submit" />
</form>
</body>

Radio Buttons Validation

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us