Question

我正在使用我在另一个线程中找到的函数来防止我的表单在我的笔记本电脑上提交哪些工作，但是，当我将当前更改推送到我的gh_pages分支以在我的手机上测试它时我注意到表单是还在努力提交。我目前正在这样做，因为我还没有将表单数据发送到后端，但我仍然想在输入字段中使用'required'属性的功能。在此先感谢您的帮助。这是我的.js和.html文件中的相关代码：

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

您需要阻止提交事件的本机行为，并防止该事件冒泡或继续沿捕获线行进。

有关详细信息，请参阅 this 。

下面有一个代码段，但Stack Overflow不允许在其代码段中提交表单，因此您还可以看到工作版 here 。

为此，请在表单的提交事件处理程序中执行此操作：

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>

Answer 2

您可以轻松使用jQuery来执行此操作。

// 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();
});

希望有所帮助！

如何防止表单提交

JS

表格

2 个答案: