Require Radio Button answer before form submission - php

Question

I have an assessment form that has true and false radio button options. I have set the required field, however it is still submitting and proceeding to the results page even if no answer is chosen. What am I missing? Here is the code for the form:
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">Sometimes I feel and experience moments of anger "out of the blue".</div>
<div class="evaluation_answers">
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_1" value="True" required/>
<label class="radio_label" for="question_1">True</label>
</span>
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_2" value="False" />
<label class="radio_label" for="question_2">False</label>
</span>
<input type="radio" style="display: none;" name="question1" id="question1_none" checked="checked" value="" />
</div>
<input type="submit" value="Submit" class="submitbtn" />
</form>

Answer 1

<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">Sometimes I feel and experience moments of anger "out of the blue".</div>
<div class="evaluation_answers">
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_1" value="True" required/>
<label class="radio_label" for="question_1">True</label>
</span>
<span class="answer_choice">
<input type="radio" class="radio_button" name="question1" id="question1_2" value="False" />
<label class="radio_label" for="question_2">False</label>
</span>
</div>
<input type="submit" value="Submit" class="submitbtn" />
</form>
Remove the <input> the checked = "checked". You have made a invisible radio button that has already been selected, so the form is not "empty". None of the others will be selected if you do that.

Answer 2

I think you have unnecessarily complicated this
const myForm = document.querySelector('#assessment')
myForm.onsubmit = e =>
{
e.preventDefault()
console.clear()
console.log( Object.fromEntries( new FormData(myForm).entries() ) )
}
myForm.onreset = () =>
{
console.clear()
}
form > div {
margin : 1em
}
.evaluation_answers span {
border : 1px solid grey;
padding : .2em .4em;
}
.evaluation_answers label input {
position : fixed;
opacity : 0;
pointer-events : none;
}
.evaluation_answers label:nth-child(1) > input:checked + span {
background-color : lightgreen;
}
.evaluation_answers label:nth-child(2) > input:checked + span {
background-color : lightcoral;
}
<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
<div class="evaluation_question">
Sometimes I feel and experience moments of anger "out of the blue".
</div>
<div class="evaluation_answers">
<label>
<input type="radio" name="question1" value="True" required>
<span>True</span>
</label>
<label>
<input type="radio" name="question1" value="False">
<span>False</span>
</label>
</div>
<button>submit</button>
<button type="reset">reset</button>
</form>