无法验证具有“必需”属性的输入答案

【问题标题】：Can't validate inputs with "required" attribute无法验证具有“必需”属性的输入
【发布时间】：2021-07-20 01:48:07
【问题描述】：

我有一个 HTML 表单，它由几个 div 组成，每个 div 里面都有标签和输入。因此，对于姓名和电子邮件输入，我想添加“必需”属性。但是当我设置它然后提交表单时，我会立即开始运行表单操作，即使我的输入是空的。所以这是我第一次面对这样的麻烦。这也是我第一次将 div 放入表单中，但似乎无论如何它应该可以工作。所以你可以在下面看到我的代码：

<section>
  <form id="feedback_form" method="POST" action="{% url 'feedback' %}">
    <div class="field half first">
      <label for="name">Name*</label>
      <input type="text" name="name" id="name" required/>
    </div>
    <div class="field half">
      <label for="email">Email*</label>
      <input type="email" name="email" id="email" required/>
    </div>
    <div class="field">
      <label for="message">Message</label>
      <textarea name="message" id="message" rows="5"></textarea>
    </div>
    <button class="button submit" type="submit">Send</button>
  </form>
</section>

【问题讨论】：

我将您的代码转换为现场演示，无法重现该问题。单击提交按钮会触发“请填写此字段”警报并阻止提交。
您的浏览器是否会自动填充这些字段？在私人模式窗口中尝试或尝试其他浏览器。

标签： html forms input required

【解决方案1】：

所以我解决了这个问题。这是页面上一些隐式 javascript 代码的问题（我通常使用后端，所以以前没有自己制作过这个页面）。因此，在 .js 文件中，我发现了脚本中不允许以标准方式提交表单的部分。

$('form').on('click', '.submit', function(event) {
    event.stopPropagation();
    event.preventDefault();
    $(this).parents('form').submit();
});

所以我的建议是：如果您使用其他人编写的代码，如果您无法解决一些隐含的任务，请多做一些研究并检查几次文件。

【讨论】：