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

HTML/CSS FORM: Data submitted though required field not valid or entered

本文关键字：提交 字段 数据 无效 输入 CSS 表单 HTML      更新时间：2023-09-26

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

当我试图从google表单切换到html表单时，为了有一个上传按钮，我发现了这个非常有用的答案:上传文件/堆栈

然后我考虑改进设计，所以我发现了这个:CSS HTML表单设计模板;(我使用了Form Style 10)。

所以在尝试和尝试之后，我已经设法做到了:JSFIDDLE

Thanks.html文件丢失了(与原始示例帖子一样)

我差不多做完了，还有些事要整理，如果有人能帮我一下就太好了:

  • 我希望在提交时检查所有必需的值我曾尝试添加所需的Name: <input type="text" name="name" required />，但它发送表单数据到电子表格，然后在第一个必填字段显示错误信息(基本上我不想发送任何东西，直到一切都是ok的形式)(我读了一些关于onclick/onsubmit和类型="按钮或提交"的东西)

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

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

    如何将此消息居中，增加大小并将颜色更改为红色

  • 我试图通过添加:<inner-wrap>来添加内包装(字段周围的灰色)作为模板(形式样式10)，但它不起作用(任何想法?)

谢谢你的帮助

它没有做你想做的事情的原因是因为按钮仍然提交，你没有提交的preventDefault事件，因为他们认为你在后端处理它。但是仍然会显示错误信息，让用户知道出错了。

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

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

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

  3. 在后台，你可以检查字段，以确保他们都填写，甚至不保存到任何地方

作为文本中心:https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

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

$("#commentForm").validate();
相关文章：