How to prevent form submission

Question

I'm using a function I found here in another thread to prevent my form from submitting which works on my laptop, however, when I pushed my current changes to my gh_pages branch to test it on my phone I noticed the form is still trying to submit. I'm currently doing it this way because I'm not sending the form data to a backend yet, but I still would like to utilize the functionality of the 'required' attribute in the input fields. Thanks for any help in advance. Here is the related code from my .js and .html files:

js

document.getElementById('gameData').onsubmit = function() {
    game['game'] = {};
    game.game['id'] = generateId(20);
    game.game['courseName'] = document.getElementById('course').value;
    game.game['gameLength'] = courseLength;
    game.game['players'] = {};
    var participants = document.querySelectorAll('.currentPlayers');
    participants.forEach(function(name){
        game.game.players[generateId(5)] = name.value;
    })

    generateCard(game.game.gameLength)

    // prevent form submission
    return false;
}

Form

<form id="gameData">
<h3>What course are you playing?</h3>
<input type="text" maxlength="40" id="course" required>
<h3>How many holes are you playing?</h3>
<div class="gameLength noHiLte">
  <input type="radio" name="gameLength" value="9" id="nine" checked/>
  <label  class="nine radio" for="nine">9</label>
  <span>or</span>
  <input type="radio" name="gameLength" value="18" id="eighteen"/>
  <label class="radio" for="eighteen">18</label>
</div>
<div class="addPlayers">
  <h3>Add up to four players:</h3><i class="fa fa-plus noHiLte" aria-hidden="true"></i>
  <!-- New player Input fields generated here -->
</div>
<input type='submit' class="startGame hide" value='Tee Off!'>

Answer 1

You can easily use jQuery to do this.

// takeover the #gameData form's onsubmit event
$("#gameData").submit(function(e){
     // your form processing codes here
     game['game'] = {};
     game.game['id'] = generateId(20);
     game.game['courseName'] = document.getElementById('course').value;
     game.game['gameLength'] = courseLength;
     game.game['players'] = {};

     var participants = document.querySelectorAll('.currentPlayers');

     participants.forEach(function(name){
         game.game.players[generateId(5)] = name.value;
     }

     generateCard(game.game.gameLength)

// prevent the default form submission
e.preventDefault();
});

Hope that helps!

Answer 2

You will need to prevent the native behavior from the submit event and prevent that event from bubbling or proceeding down the capture line.

See this for details.

There is a snippet below, but Stack Overflow doesn't allow form submissions in their snippets, so you can also see a working version here.

To do this, in your form's submit event handler:

var form = document.getElementById("gameData"); // This is the form element
var name = document.getElementById("txtName");
var err = document.getElementById("err");

// Event handlers are automatically passed a reference to the
// event that triggered the handler. You must remember to set up
// a function argument to capture that reference. Here, that is "evt"
form.addEventListener("submit", function(evt){

  // Using whatever logic you deem necessary, proceed or cancel:
  if(txtName.value === ""){
    // There is a problem:
    evt.preventDefault();  // cancel the event
    evt.stopPropagation(); // prevent it from propagating to other elements  
    
    err.textContent = "E R R O R !";  
  }

});

span { font-weight:bold; color: #f00;}

<form id="gameData" action="#" method="post">
  
  Name: <input id="txtName" type="text">
  
  <input type="submit"><span id="err"></span>
</form>