如何防止表单提交

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

您将需要防止Submit事件的本机行为，并防止该事件冒泡或继续执行捕获行。

请参阅此了解详情。

下面有一个代码段，但是Stack Overflow不允许在其代码段中提交表单，因此您也可以在此处看到有效的版本。

为此，请在表单的Submit事件处理程序中：

 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 = "ERROR !"; } }); 

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

希望有帮助！