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.
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>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<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>
</div>
<button type="button" class="btn btn-primary next-step" onclick="validateStep(1)">Next</button>
</div>
<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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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>
<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>
</div>
<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>
</div>
</form>
</div>
</div>
</div>
<script>
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');
field1Error.style.display = 'block';
} else {
const field1Error = currentStep.querySelector('#field1-error');
field1Error.style.display = 'none';
}
// Reset error message for group 1
errorMessage.style.display = '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;
radioError.style.display = 'block';
} else {
radioError.style.display = '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');
field3Error.style.display = 'block';
} else {
const field3Error = currentStep.querySelector('#field3-error');
field3Error.style.display = 'none';
}
}
if (valid) {
const nextStep = document.querySelector(`.step[data-step="${step + 1}"]`);
currentStep.style.display = 'none';
nextStep.style.display = 'block';
} else {
errorMessage.style.display = 'block';
}
}
function prevStep(step) {
const currentStep = document.querySelector(`.step[data-step="${step}"]`);
const prevStep = document.querySelector(`.step[data-step="${step - 1}"]`);
currentStep.style.display = 'none';
prevStep.style.display = 'block';
}
function clearRadioError(questionNumber) {
const error = document.getElementById(`radio-error-${questionNumber}`);
console.log(`Clearing error for question ${questionNumber}`);
error.style.display = 'none';
}
function submitForm() {
const form = document.getElementById('multistep-form');
form.submit();
}
</script>
</body>
</html>