HTML / CSS表单：通过必填字段提交的数据无效或输入

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 =＆＃34;按钮或提交＆＃34; 但是无法解决这个问题）

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

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

  如何将此消息置于表单下方，增加大小并将颜色更改为红色

• 我试图通过添加：<inner-wrap>来添加内包裹（字段周围的灰色）作为模板（表单样式10），但它不起作用（任何想法？）

感谢您的帮助

Answer 1

它之所以没有做你想要的是因为按钮仍然提交，你提交时没有preventDefault事件，因为它们假设你在后端处理它。但仍会显示错误消息，让用户知道出错了。

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

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

2. 在检查所有字段然后调用之前，您可以处理它以便不提交 form.submit（）（通过这种方法你底部的最后一个不输入类型=＆＃39;提交＆＃39;并处理点击事件并调用验证表单方法然后提交，如果一切正常）

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

以文字为中心：https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

编辑： 对于表单验证，使用CDN / local js文件导入页面顶部的jQuery Validate，然后调用：

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