Check box not working on form before allowed to submit-CodePudding

Hello guys trying to get my checkbox to need to be clicked before submitting my button which is an onclick not submit??

<form>
  <p>
    <input style="padding:14px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; width: 300px; border: none;" placeholder="Enter Date Here... e.g 17/05/1981" />
  </p>

  <p>

    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" required="true"> <label style="color: #fff; font-size: 10px;"> Please Accept Terms</label></p>

  <p><a id="generateButton" href="generate.html" class="progress-button red" data-loading="Creating..." data-finished="Start Over" data-type="background-vertical" onclick="getRandomImage()">Start Search</a></p>
</form>

CodePudding user response：

You can add logic to your clickHandler to check that the box is checked. So instead of calling getRandomImage() directly you add some logic to conditionally call the function.

function clickHandler = () => {
  // get the checkbox element from the DOM
  const checkboxElement = document.getElementById('vehicle3');
  // see if the checkbox is checked
  if (checkBoxElement.checked) {
    getRandomImage();
  } else {
    console.log('The checkbox wasn't checked!');
  }
}

// add the handler to the button
document.getElementById('generateButton').addEventListener('click', clickHandler);

CodePudding user response：

Unfortunately HTML5 does not provide an out-of-the-box way to do that.

However, using jQuery, or javascript, you can easily control if a checkbox group has at least one checked element.

function myFunction() {
  document.getElementById("myCheck").required = true;
}

<form action="/action_page.php">
  Checkbox: <input type="checkbox" id="myCheck" name="test">
  <input type="submit" onclick="myFunction()">
</form>