javascript - HTML/CSS 表格 : Data submitted though required field not valid or entered

Question

这是我第一次使用 HTML/CSS 创建表单:

虽然为了拥有上传按钮而尝试从 google 表单切换到 html 表单，但我发现这个非常有用的答案:Upload file/stackover

然后我着眼于改进设计，所以我发现了这个: CSS HTML Form Designs Template ; (我使用了 Form Style 10)。

所以在尝试和尝试之后我设法做到了这一点: JSFIDDLE

缺少 Thanks.html 文件(与原始示例帖子一样)

我几乎完成了，除了很少的事情需要解决，如果有人能帮助我，那就太好了:

• 我希望在提交时检查所有必填值我试图添加必需的 Name: <input type="text" name="name" required />尽管如此，它将表单数据发送到电子表格，然后在第一个必填字段中显示错误消息(基本上我不希望在表单中一切正常之前不发送任何内容)(我读了一些关于 onclick/onsubmit 和 type="button或提交“但无法解决)

• 在致谢文件中，我删除了所有内容，只写了:

  <div>
      <p><blink>Thank you <?= name ?>, your application has been received.</blink></p>
  </div>
  

  请问如何将此消息置于窗体下方、增大尺寸并将颜色更改为红色

• 我尝试通过添加以下内容来添加内部包装(字段周围的灰色)作为模板(表单样式 10):<inner-wrap>相反，但它不起作用(知道吗？)

谢谢你的帮助

Answer 1

它不执行您想要的操作的原因是因为按钮仍然提交并且您在提交时没有 preventDefault 事件，因为他们假设您在后端处理它。但仍会显示错误消息，让用户知道出现问题。

有几种方法可以解决这个问题:

1. 您可以使用第 3 方插件，例如 jquery validate

2. 您可以处理它直到您检查所有字段然后调用之前不提交form.submit()(通过这种方法，您可以在底部输入最后一个，而不是输入 type='submit' 并处理点击事件并调用验证表单方法，然后在一切正常时提交)

3. 在后端，您可以检查字段以确保它们都已填写，甚至不会保存到任何地方

至于你的文本居中:https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

编辑:对于表单验证，使用 CDN/本地 js 文件在页面顶部导入 jQuery 验证，然后调用:

$("#commentForm").validate();