How to make any one option is required | Community
Skip to main content
Level 3
December 7, 2018
Solved

How to make any one option is required

  • December 7, 2018
  • 7 replies
  • 3777 views

Hello everyone

We had a requirement of single radio button in our project so we created it.

And in the form we have a question and options for that question are 5 single radio buttons which are different from each other.

I know how to make a radio button required. But here we have a requirement where either of the 5 should be choosed or it should throw an error . How can i acheive it

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Lee__A

If you have an Adaptive Form and you added a radio button, you should be only able to select one of the values. It looks like what you've done is create a table with individual check boxes inside each one of the cells. This makes them independent fields instead of a single field so you'd be able to select all of them. Check boxes can be selected individually, radio buttons are a group where only one is allowed.

If you want to use the same approach, on the commit event of each of your objects, you'll need to null out the other values. This would simulate a radio button. Note that the check boxes all hold separate values too - you have 5 field values instead of one value that equals the selected value. You could handle this with a hidden field.

Ideally you'd skip the table approach and use text and a radio button and use CSS to get the look and feel you're going for. If you try to show this on a mobile device it won't make any sense to the end user.

7 replies

smacdonald2008
Level 10
December 7, 2018

You are not clear where the radio button is used:

1 - do you mean the radio button is used in a component dialog

2 - on an AEM component that is visiable in a web page

can you please clarify.

Santhosh4Author
Level 3
December 7, 2018

I have a question in the Survey and the options for that question are 5 different single radio buttons . Either one of them should be choosed or it should throw an error that any one should be choosed

GaneshM
Level 3
December 10, 2018

You can achieve using RadioGroup,

FYI, RadioGroup — Granite UI 1.0 documentation

Thanks!

Mayank_Gandhi
Adobe Employee
Adobe Employee
December 10, 2018

Hi Santhosh,

Any particular reason for going with 5 single radio button instead of a Radio button group?

Santhosh4Author
Level 3
December 11, 2018

We have a requirement where we need to use single radio buttons(which has one option) for options for a question

in a Table as shown above we have a question and 5 options and all of them are single radio buttons (independent) either any one of them should be choosed

Lee__AAdobe EmployeeAccepted solution
Adobe Employee
December 11, 2018

If you have an Adaptive Form and you added a radio button, you should be only able to select one of the values. It looks like what you've done is create a table with individual check boxes inside each one of the cells. This makes them independent fields instead of a single field so you'd be able to select all of them. Check boxes can be selected individually, radio buttons are a group where only one is allowed.

If you want to use the same approach, on the commit event of each of your objects, you'll need to null out the other values. This would simulate a radio button. Note that the check boxes all hold separate values too - you have 5 field values instead of one value that equals the selected value. You could handle this with a hidden field.

Ideally you'd skip the table approach and use text and a radio button and use CSS to get the look and feel you're going for. If you try to show this on a mobile device it won't make any sense to the end user.

Mayank_Gandhi
Adobe Employee
Adobe Employee
December 12, 2018

Santhosh,

What Lee mentioned would be an Ideal approach here for your use case else you will have to play a lot at scripting level. In case you want to customize the radio button here is one great blog written some time back:

CSS3 Radio Buttons in Adaptive Forms