Display a message when Radio Button is not selected

[Former Community Member]

I am trying to validate the radio buttons in a survey I am creating on my HTML5 form. The survey has a question and 5 different radio buttons to choose from (Strongly Disagree, Disagree, Neither Agree nor Disagree, etc.) If the user does not select an answer within the radio button group, I want it to be highlighted and a message displayed on each group that was not answered.

I followed the directions from this link shown below:

The messages displayed on a text field, however the message will not display on the radio button group. In the Object palette, Value tab I have set the Type: User Entered - Required and in the Empty Message box I wrote the message I want displayed. The radio buttons only have a gray box around them when they are not answered, no display message.

Is there any reason why this isn't working or any other way I can validate radio buttons with a display message?

Thank you.

[kautuk_sahni]

See this Adobe Experience Manager Help | Dynamically modifying an Adobe Experience Manager Touch UI Dialog

This is closest to what you wan to achieve.

~kautuk

[Techaspect_Solu · Accepted solution]

Hi Bianca,

To fix the issue, Please use a custom JS method (similar to below code) to display the error message inside the radio button group.

<script>
function validateForm() {
  var x = document.forms["myForm"]["radioGroupName"].value;
  if (x == "") {
  document.getElementById("message").innerHTML = "Select atleast one option";
  } else {
  document.getElementById("message").innerHTML = "Submitted Successfully";

  }
  
}
</script>
<form name="myForm" action="/action_page_post.php"
onsubmit="return validateForm()" method="post">
<fieldset>
<input type="radio" name="coffee" value="StronglyDisagree">Strongly Disagree<br>
<input type="radio" name="coffee" value="Disagree">Disagree<br>
<input type="radio" name="coffee" value="Neither">Neither Agree nor Disagree<br>
<input type="radio" name="coffee" value="Agree">Agree<br>
<input type="radio" name="coffee" value="StronglyAgree">Strongly Agree<br>

<p id="message"></p>
</fieldset>

  
<input type="submit" value="Submit">
</form>

Thank you,
Techaspect Solutions.
http://www.techaspect.com/

[smacdonald2008]

Agreed with tech aspect - you need to use standard HTML and JS logic.