Form Onclick with Required field?

Question

I have currently a form which has the below code, the issue is that when a user presses the form submit button even if not checking the required field the onclick call is still triggered, how can I make it so that you HAVE to fulfill the required field before getting a trigger?

<form method="post">
	<div class="form-group">
	<select id="inputState" class="form-control" style="width: 100%">
		<option>10,000 credits</option>
		<option>25,000 credits</option>
		<option>50,000 credits</option>
		<option>75,000 credits</option>
		<option>100,000 credits</option>
	</select>
	</div>
	<div class="text-center">
	<div class="row justify-content-center mb-2">
	<div class="col-12 col-md-8 text-center">
	<p class="mb-0 small text-muted"><strong>Promotion Disclaimer</strong>
	<br>You will be required to install a free mobile app from our sponsors to receive your Coins for free. This process only takes a minute or two and you can remove the app once you're finished.</p>
	</div>
	</div>
	<div class="form-check">
	  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required>
	  <label class="form-check-label" for="defaultCheck1">
		I agree to Promotion Disclaimer
	  </label>
	</div>
	<br>
	<button class="btn btn-primary btn-sm btn-continue" data-step="3" onclick="call_locker();">Continue</button>
	</div>
	</form>

Answer 1

Using the form onsubmit event, move your call_locker call into the form element. This is called when there is a submit event. You can trigger said event by default on your button click. To prevent the refreshing of the page, you can either add event.preventDefault() or returning false from the function. Here I have a mock function of call_locker which returns false.

<script>
call_locker = () => { console.log('called locker'); return false; }
</script>

<form method="post" onsubmit="return call_locker();">
  <div class="form-group">
    <select id="inputState" class="form-control" style="width: 100%">
      <option>10,000 credits</option>
      <option>25,000 credits</option>
      <option>50,000 credits</option>
      <option>75,000 credits</option>
      <option>100,000 credits</option>
    </select>
  </div>
  <div class="text-center">
    <div class="row justify-content-center mb-2">
      <div class="col-12 col-md-8 text-center">
        <p class="mb-0 small text-muted"><strong>Promotion Disclaimer</strong>
          <br>You will be required to install a free mobile app from our sponsors to receive your Coins for free. This process only takes a minute or two and you can remove the app once you're finished.</p>
      </div>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required>
      <label class="form-check-label" for="defaultCheck1">
		I agree to Promotion Disclaimer
	  </label>
    </div>
    <br>
    <button class="btn btn-primary btn-sm btn-continue" data-step="3">Continue</button>
  </div>
</form>