表单已配置required验证，空字段仍提交致程序崩溃，求原因

嘿，我一眼就揪出问题所在了——你的提交按钮结构直接把HTML5的原生验证给绕过去了！

核心问题：提交逻辑被干扰 #

你把提交按钮套在了<a href=#>标签里面，点击这个按钮时，浏览器会优先触发<a>标签的默认跳转行为（跳转到页面锚点），完全跳过了表单的原生提交流程。这就导致你设置的required验证根本没机会生效，空字段直接被提交到后端，自然会引发程序崩溃。

另外，你的按钮也没明确指定type="submit"——虽然按钮在表单里默认类型是submit，但被<a>包裹后，这个默认行为被彻底打乱了，进一步加剧了验证失效的问题。

修复方案 #

方案1：简化提交按钮（推荐）

直接去掉包裹按钮的<a>标签，明确设置按钮的type="submit"，让表单走原生提交流程，这样required验证就能正常工作了：

<form action="{{ url_for('background_process') }}" method="POST">
  <input type="text" id="name" name="name" required />
  <input type="url" id="url" name="url" required />
  <input type ="text" id="mdp-demo" name= "mdp-demo" required />
  <!-- 直接用submit按钮，去掉多余的a标签 -->
  <button type="submit" class='btn btn-default'>Submit</button>
</form>

方案2：保留JS点击事件（如果有特殊需求）

如果你必须保留process_input的点击逻辑（比如有自定义JS处理），那得在JS里手动触发表单验证，再决定是否提交：

document.getElementById('process_input').addEventListener('click', function(e) {
  // 阻止a标签的默认跳转行为
  e.preventDefault();
  // 获取当前表单元素
  const form = this.closest('form');
  // 触发原生验证逻辑
  if (form.checkValidity()) {
    // 验证通过，提交表单
    form.submit();
  } else {
    // 验证不通过，显示浏览器原生的错误提示
    form.reportValidity();
  }
});

额外重要提醒 #

HTML5的required只是前端的基础校验，很容易被绕过（比如用户禁用JS，或者直接用工具发送POST请求）。所以你的后端background_process函数里一定要加字段校验，检查这三个字段是否为空，做好异常处理，这样才能从根本上避免程序崩溃。

内容的提问来源于stack exchange，提问作者Celt67