HTML5必需的标记无法与我的javascript创建的函数一起使用

Question

我在javascript / jquery中输入字段，但是我想在上面使用必需的标签。 但是，由于它一直在提交，因此它似乎不起作用，不仅提交，而且甚至没有弹出与未填写输入字段有关的消息。 我也使用引导程序，以防这可能改变游戏规则。

我的HTML5代码：（是的，我已经将其声明为html5文档）忽略表单中的按钮，这些按钮与问题无关。 我只是放置了表单标签，以确保您了解我确实包裹了表单...也许问题可能是由于按钮所致。

<form  id='my_form' class="container-fluid" action="" method="POST">
 <button id='resetInputs' type='button' onclick='getResetInputs()' class='btn btn-danger fa fa-refresh fa-2x resetInputs'></button>
 <button type='button' id='saveBtn' class='btn btn-info fa fa-download fa-2x saveBtn' required name="submit" onclick="saveExerciseAjaxCall()"></button>
</form>

我想在以下方面使用javascript / jquery函数：

function getExerciseTitle() {
 var exerciseTitle = $('<input/>', {
 'class': 'getExerciseTitle form-group form-control required',
 'type': 'text',
 'name': 'getExerciseTitle',
 'id': 'getExerciseTitle',
 'placeholder': 'Exercise title',
 'required': true,
 'oninvalid': "this.setCustomValidity('I would like to have a title!')",
 'oninput': "this.setCustomValidity('')"
 });
  return exerciseTitle;
 }

该函数被附加到：

$('form').append(getExerciseTitle());

那么，我现在错过了什么？

干杯!

Answer 1

submit事件未触发。 您在单击按钮时调用save方法。 在您的HTML中，将“提交”按钮类型更改为“提交”。

之前：

<button type='button' id='saveBtn' class='btn btn-info fa fa-download fa-2x saveBtn' required name="submit" onclick="saveExerciseAjaxCall()"></button>

后：

<button type='submit' id='saveBtn' class='btn btn-info fa fa-download fa-2x saveBtn' required name="submit" onclick="saveExerciseAjaxCall()"></button>

然后，如果你想提交表单，而无需实际POST荷兰国际集团的数据，你可以做这样的事情在你的JS：

$("#my_form").on("submit", function (event) {
    event.preventDefault();
    // your code here
});