var form = document.getElementById（gameData）; //这是表单元素名称= document.getElementById（txtName）; var err = document.getElementById（err）; //事件处理程序会自动传递给引发处理程序的//事件的引用。你必须记得设置//一个函数参数来捕获该引用。这里是evtform.addEventListener（submit，function（evt）{//使用你认为必要的任何逻辑，继续或取消：if（txtName.value ===）{//有一个问题：evt.preventDefault（）; //取消事件evt.stopPropagation（）; //阻止它传播到其他元素err.textContent =ERROR！;}}）;  

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

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>