Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

How to make any one option is required

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Level 3

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.

View solution in original post

7 Replies

Avatar

Level 10

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.

Avatar

Level 3

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

Avatar

Employee Advisor

Hi Santhosh,

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

Avatar

Level 3

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

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

Avatar

Correct answer by
Level 3

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.

Avatar

Employee Advisor

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