带有必填字段的表单 Onclick？

Question

我目前有一个包含以下代码的表单，问题是当用户按下表单提交按钮时，即使没有检查必填字段，onclick呼叫仍然会被触发，我如何才能做到这一点，以便您必须完成必填字段在获得触发器之前？

<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

使用 formonsubmit事件，将 call_locker 调用移动到form元素中。当有submit事件时调用它。默认情况下，您可以在单击按钮时触发所述事件。为了防止页面刷新，您可以event.preventDefault()从函数中添加或返回 false。在这里，我有一个call_locker返回 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>

Answer 2

您的问题有一个简单的解决方案。

不使用onclick事件，可以使用onsubmit事件，除非提交表单，否则不会调用该函数。

如果具有该属性的元素未填写，浏览器将不会提交表单，因此如果您使用该事件，则在填写字段之前required不会调用该函数。onsubmitrequired

onclick="call_locker();"应该成为onsubmit="call_locker();"