javascript - Formulär Onclick med obligatoriskt fält?

Jag har för närvarande ett formulär som har nedanstående kod, problemet är att när en användare trycker på formulärets skicka-knapp, även om det obligatoriska fältet inte är ifyllt, så utlöses ändå onclick-anropet. Hur kan jag göra så att man MÅSTE fylla i det obligatoriska fältet innan det utlöses?

<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>

Svar #1

Genom att använda formulärets onsubmit-händelse, flytta ditt call_locker-anrop till form-elementet. Detta anropas när det finns en submit-händelse. Du kan aktivera nämnda händelse som standard vid klick på din knapp. För att förhindra att sidan uppdateras kan du antingen lägga till event.preventDefault() eller returnera false från funktionen. Här har jag en mock-funktion av call_locker som returnerar 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>

Svar #2

Det finns en enkel lösning på ditt problem.

Istället för att använda onclick-händelsen kan du använda onsubmit-händelsen, som inte kommer att anropa funktionen om inte formuläret skickas.

Webbläsaren kommer inte att skicka formuläret om element med attributet required inte är ifyllda, så funktionen kommer inte att kallas om du använder onsubmit-händelsen tills de required-fälten är ifyllda.

onclick="call_locker();" ska bli onsubmit="call_locker();"