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>

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>

• javascript
• jquery
• html

Share Follow edited May 22, 2019 at 4:36 Udhay Titus 5,86944 gold badges2525 silver badges4242 bronze badges asked May 22, 2019 at 4:30 John CenaJohn Cena 6111 silver badge22 bronze badges 3

• The default behavior of a button in a form is to attempt to submit that form. You might wish to capture the event with a handler and put in place an preventDefault unless you can verify the form is valid. – Alexander Nied Commented May 22, 2019 at 4:41
• Just to clarify @AlexanderNied, the default behavior of a button is to attempt to submit ONLY if you have the type="submit" on it. You can still have buttons in a form that will NOT attempt to submit it. – Bruno Monteiro Commented May 22, 2019 at 4:44
• 1 @BrunoMonteiro - Sorry, I mischaracterized this somewhat-- I called it the "default behavior" because if no type or an empty type attribute is included on the <button> then it will behave as a type="submit". But you are correct-- the way I typed it is somewhat unclear/misleading-- if a specific, non-"submit" type attribute is included on the <button> it will not attempt to submit the form when clicked. – Alexander Nied Commented May 22, 2019 at 4:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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>

There is a simple solution to your issue.

Instead of using the onclick event, you can use the onsubmit event, which will not call the function unless the form is submitted.

The browser will not submit the form if elements with the required attribute are not filled out, so the function will not be called if you are using the onsubmit event until the required fields are filled out.

onclick="call_locker();" should bee onsubmit="call_locker();"

There is another way to solve your problem. if you want to make it so that the browser won't refresh itself (and therefore submit the form) whenever you click on the submit button and your fields are not fulfilled, you can make your javascript code do it by preventing the default of the submit key which is refreshing the browser whenever it is pressed.

Javascript Example

call_locker(event)
{
  if (document.getElementById().value === undefined && 
      document.getElementById(defaultCheck1).value === undefined)
  {
    event.preventDefault();
  }
}