Error display in multistep form

I’m working on a multistep form, and I’ve encountered an issue with error messages in Step 2. Every question in Step 2 is set to be required. The error messages for unselected options are displaying correctly and disappearing when a radio button is selected within a group.

However, I’m facing a specific problem with question one in Step 2. When the “next” button is clicked and not all the other questions are answered correctly, the error message under question 1 reappears. In developer mode, I observed that the CSS property display: none; switches back to display: block; when clicking “next,” but I’m unsure how to resolve this.

Link to CodePen

I’d greatly appreciate it if anyone could help me identify any errors or provide suggestions on how to resolve the issue. Thank you in advance for your assistance!

<!DOCTYPE html>
    .error-message {
      color: red;
      font-size: 80%;
      display: none;
      margin-top: 5px;
    /* Verberg alle stappen behalve de eerste bij het laden van de pagina */
    .step:not(:first-of-type) {
      display: none;


<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <form id="multistep-form" target="_self" action="https://your-google-form-action-url" method="POST">
        <div class="step" data-step="1">
          <h3>Step 1</h3>
          <div class="form-group">
            <label for="field1">Field 1</label>
            <input type="text" class="form-control" id="field1">
            <small class="error-message" id="field1-error">This field is required.</small>
          <button type="button" class="btn btn-primary next-step" onclick="validateStep(1)">Next</button>
        <div class="step" data-step="2">
          <h3>Step 2</h3>
          <!-- Question 1 -->
          <div class="form-group">
            <label>Question 1</label><br>
            <label><input type="radio" name="question1" value="1" onchange="clearRadioError(1)"> 1</label>
            <label><input type="radio" name="question1" value="2" onchange="clearRadioError(1)"> 2</label>
            <label><input type="radio" name="question1" value="3" onchange="clearRadioError(1)"> 3</label>
            <label><input type="radio" name="question1" value="4" onchange="clearRadioError(1)"> 4</label>
            <label><input type="radio" name="question1" value="5" onchange="clearRadioError(1)"> 5</label>
            <small class="error-message" id="radio-error-1">This question is required.</small>
          <!-- Question 2 -->
          <div class="form-group">
            <label>Question 2</label><br>
            <label><input type="radio" name="question2" value="1" onchange="clearRadioError(2)"> 1</label>
            <label><input type="radio" name="question2" value="2" onchange="clearRadioError(2)"> 2</label>
            <label><input type="radio" name="question2" value="3" onchange="clearRadioError(2)"> 3</label>
            <label><input type="radio" name="question2" value="4" onchange="clearRadioError(2)"> 4</label>
            <label><input type="radio" name="question2" value="5" onchange="clearRadioError(2)"> 5</label>
            <small class="error-message" id="radio-error-2">This question is required.</small>
          <!-- Question 3 -->
          <div class="form-group">
            <label>Question 3?</label><br>
            <label><input type="radio" name="question3" value="1" onchange="clearRadioError(3)"> 1</label>
            <label><input type="radio" name="question3" value="2" onchange="clearRadioError(3)"> 2</label>
            <small class="error-message" id="radio-error-3">This question is required.</small>
          <!-- Question 4 -->
          <div class="form-group">
            <label>Question 4?</label><br>
            <label><input type="radio" name="question4" value="1" onchange="clearRadioError(4)"> 1</label>
            <label><input type="radio" name="question4" value="2" onchange="clearRadioError(4)"> 2</label>
            <small class="error-message" id="radio-error-4">This question is required.</small>
          <!-- Question 5 -->
          <div class="form-group">
            <label>Question 5?</label><br>
            <label><input type="radio" name="question5" value="1" onchange="clearRadioError(5)"> 1</label>
            <label><input type="radio" name="question5" value="2" onchange="clearRadioError(5)"> 2</label>
            <small class="error-message" id="radio-error-5">This question is required.</small>
          <!-- Question 6 -->
          <div class="form-group">
            <label>Question 6?</label><br>
            <label><input type="radio" name="question6" value="1" onchange="clearRadioError(6)"> 1</label>
            <label><input type="radio" name="question6" value="2" onchange="clearRadioError(6)"> 2</label>
            <small class="error-message" id="radio-error-6">This question is required.</small>
          <!-- Question 7 -->
          <div class="form-group">
            <label>Question 7?</label><br>
            <label><input type="radio" name="question7" value="1" onchange="clearRadioError(7)"> 1</label>
            <label><input type="radio" name="question7" value="2" onchange="clearRadioError(7)"> 2</label>
            <small class="error-message" id="radio-error-7">This question is required.</small>
          <!-- Question 8 -->
          <div class="form-group">
            <label>Question 8?</label><br>
            <label><input type="radio" name="question8" value="1" onchange="clearRadioError(8)"> 1</label>
            <label><input type="radio" name="question8" value="2" onchange="clearRadioError(8)"> 2</label>
            <small class="error-message" id="radio-error-8">This question is required.</small>
          <!-- Question 9 -->
          <div class="form-group">
            <label>Question 9?</label><br>
            <label><input type="radio" name="question9" value="1" onchange="clearRadioError(9)"> 1</label>
            <label><input type="radio" name="question9" value="2" onchange="clearRadioError(9)"> 2</label>
            <small class="error-message" id="radio-error-9">This question is required.</small>
          <!-- Question 10 -->
          <div class="form-group">
            <label>Question 10?</label><br>
            <label><input type="radio" name="question10" value="1" onchange="clearRadioError(10)"> 1</label>
            <label><input type="radio" name="question10" value="2" onchange="clearRadioError(10)"> 2</label>
            <small class="error-message" id="radio-error-10">This question is required.</small>
          <!-- End of additional questions -->

          <button type="button" class="btn btn-primary prev-step" onclick="prevStep(2)">Previous</button>
          <button type="button" class="btn btn-primary next-step" onclick="validateStep(2)">Next</button>

        <div class="step" data-step="3">
          <h3>Step 3</h3>
          <div class="form-group">
            <label for="field3">Field 3</label>
            <input type="text" class="form-control" id="field3">
            <small class="error-message" id="field3-error">This field is required.</small>
          <button type="button" class="btn btn-primary prev-step" onclick="prevStep(3)">Previous</button>
          <button type="button" class="btn btn-primary submit-step" onclick="submitForm()">Submit</button>

  function validateStep(step) {
  const currentStep = document.querySelector(`.step[data-step="${step}"]`);
  const errorMessage = currentStep.querySelector('.error-message');

  let valid = true;

  if (step === 1) {
    const input = currentStep.querySelector('input[type="text"]');
    // Check if text input field is filled
    if (input.value.trim() === '') {
      valid = false;
      const field1Error = currentStep.querySelector('#field1-error'); = 'block';
    } else {
      const field1Error = currentStep.querySelector('#field1-error'); = 'none';
    // Reset error message for group 1 = 'none';
  } else if (step === 2) {
    // Validate main questions (question1 to question10)
    for (let i = 1; i <= 10; i++) {
      const radioInputs = currentStep.querySelectorAll(`input[name="question${i}"]`);
      let radioSelected = false;
      radioInputs.forEach(input => {
        if (input.checked) {
          radioSelected = true;
      const radioError = currentStep.querySelector(`#radio-error-${i}`);
      if (!radioSelected) {
        valid = false; = 'block';
      } else { = 'none';
  } else if (step === 3) {
    const input = currentStep.querySelector('input[type="text"]');
    // Check if text input field is filled
    if (input.value.trim() === '') {
      valid = false;
      const field3Error = currentStep.querySelector('#field3-error'); = 'block';
    } else {
      const field3Error = currentStep.querySelector('#field3-error'); = 'none';

  if (valid) {
    const nextStep = document.querySelector(`.step[data-step="${step + 1}"]`); = 'none'; = 'block';
  } else { = 'block';

  function prevStep(step) {
    const currentStep = document.querySelector(`.step[data-step="${step}"]`);
    const prevStep = document.querySelector(`.step[data-step="${step - 1}"]`); = 'none'; = 'block';

  function clearRadioError(questionNumber) {
  const error = document.getElementById(`radio-error-${questionNumber}`);
  console.log(`Clearing error for question ${questionNumber}`); = 'none';

  function submitForm() {
    const form = document.getElementById('multistep-form');


In the validateStep function, you have
const errorMessage = currentStep.querySelector('.error-message');
at the beginning
which selects the first error message,
and when step = 2,
that selects the first radio error element as well.

At the end of that function, you have an else that’s causing an issue.

It makes the first error message appear (which would be the radio error element when step is 2).

You can prevent that element from appearing by changing
else {
to be
else if (step != 2) {
or something similar.