Display a message when Radio Button is not selected | Community
Skip to main content
A
Anonymous
July 18, 2017
Solved

Display a message when Radio Button is not selected

  • July 18, 2017
  • 3 replies
  • 10695 views

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.

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 Techaspect_Solu

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/

3 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
July 19, 2017

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

Kautuk Sahni
Techaspect_Solu
Techaspect_SoluAccepted solution
Level 7
July 19, 2017

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
smacdonald2008
Level 10
July 19, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...