Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Display a message when Radio Button is not selected

biancaaguirre
Level 1
Level 1

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:

validate.PNG

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.

1 Accepted Solution
Techaspect_Solu
Correct answer by
Level 7
Level 7

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/

View solution in original post

3 Replies
Techaspect_Solu
Correct answer by
Level 7
Level 7

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
Level 10
Level 10

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