Require Radio Button answer before form submission-CodePudding

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 >Sometimes I feel and experience moments of anger "out of the blue".</div>
  <div >
  <span >
    <input type="radio"  name="question1" id="question1_1" value="True" required/>
    <label  for="question_1">True</label>
  </span>
  <span >
    <input type="radio"  name="question1" id="question1_2" value="False" />
    <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"  />
</form>

CodePudding user response：

<form action="../results" method="post" id="assessment">
<!-- Question 1 BLUE -->
  <div >Sometimes I feel and experience moments of anger "out of the blue".</div>
  <div >
  <span >
    <input type="radio"  name="question1" id="question1_1" value="True" required/>
    <label  for="question_1">True</label>
  </span>
  <span >
    <input type="radio"  name="question1" id="question1_2" value="False" />
    <label  for="question_2">False</label>
  </span>
    
  </div>
  <input type="submit" value="Submit"  />
</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.

CodePudding user response：

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 >
    Sometimes I feel and experience moments of anger "out of the blue".
  </div>
  <div >
    <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>