格式化 AJAX
用于声明格式处理的香草 JavaScript 库 格式化不需要框架 – 通过数据属性或简单的JavaScript API与平面 HTML 形式合作.
安装
国家预防机制/亚兰
npm install @formspree/ajax
yarn add @formspree/ajax
脚本标记 (CDN)
没有捆绑。 关闭前添加此片段 </body> 标签 :
<script>
window.formspree =
window.formspree ||
function () {
(formspree.q = formspree.q || []).push(arguments);
};
formspree('initForm', { formElement: '#my-form', formId: 'YOUR_FORM_ID' });
</script>
<script src="https://unpkg.com/@formspree/ajax@1" defer></script>
快速启动
无害环境管理(带捆绑机)
import { initForm } from '@formspree/ajax';
initForm({
formElement: '#contact-form',
formId: 'YOUR_FORM_ID',
});
HTML 语言
<div data-fs-success></div>
<div data-fs-error></div>
<form id="contact-form">
<label for="email">Email</label>
<input type="email" id="email" name="email" data-fs-field />
<span data-fs-error="email"></span>
<button type="submit" data-fs-submit-btn>Send</button>
</form>
就是这样。 库自动处理提交,验证错误,加载状态,以及成功消息.
数据属性
这些 HTML 属性允许声明形式行为而无需额外的 JavaScript :
| 属性 | 元素 | 说明 |
|---|---|---|
data-fs-error="fieldName" | <span>, (中文(简体) ), <div> | 显示字段级验证错误。 如果为空,则插入 API 错误消息 。 如果它有内容,则显示/隐藏为-is. |
data-fs-error | <div> | 显示窗体级别错误(没有值)。 相同的内容策略:空元素获得服务器消息,有内容的元素显示为-is. |
data-fs-success | <div> | 提交后显示成功消息。 空元素获得"谢谢!",带有内容的元素显示为-is. |
data-fs-field | <input>, (中文(简体) ), <textarea> | 标记要接收的输入 aria-invalid="true" 错误。 字段名称从元素读取 name 属性. |
data-fs-submit-btn | <button> | 提交期间自动停用,完成后重新启用. |
配置
通过配置对象到 initForm()数字 :
import { initForm } from '@formspree/ajax';
const handle = initForm({
// Required
formElement: '#contact-form', // CSS selector or HTMLFormElement
formId: 'YOUR_FORM_ID', // Your Formspree form ID
// Optional
origin: 'https://formspree.io', // API origin (default)
debug: false, // Enable console logging
// Extra data merged into every submission
data: {
source: 'website',
campaign: () => getCampaign(),
timestamp: async () => await getServerTime(),
},
// Lifecycle callbacks
onInit: (context) => {},
onSubmit: (context) => {},
onSuccess: (context, result) => {},
onError: (context, error) => {},
onFailure: (context, error) => {},
// Custom rendering (override defaults)
enable: (context) => {},
disable: (context) => {},
renderFieldErrors: (context, error) => {},
renderSuccess: (context, message) => {},
renderFormError: (context, message) => {},
});
// Clean up when done
handle.destroy();
生命周期召回
| 回电 | 参数 | 说明 |
|---|---|---|
onInit | (context) | 表格初始化时调用 . |
onSubmit | (context) | 在提交来文之前已打电话. |
onSuccess | (context, result) | 请求成功提交. |
onError | (context, error) | 从Formpree调用验证错误. |
onFailure | (context, error) | 调用出乎意料的错误(例如网络故障). |
这个 context 对象包含: form (HTML形式), formKey, (中文(简体) ), endpoint, (中文(简体) ), client,以及 config。 。 。 .
默认行为
库提供了框外的合理默认:
- 提交按钮 ——提交期间残废,竣工后再启用.
- 字段错误 - 输入
data-fs-error="fieldName"要素。 如果元素为空,则插入 API 错误消息 。 如果它有内容,则显示/隐藏为-is. - 外地验证 —— 说
aria-invalid="true"设置在data-fs-field当其字段有错误时输入. - 成功的消息 - 电话
data-fs-success元素显示为“谢谢!”(或保留用户内容). - 格式错误 - 电话
data-fs-error元素(没有值)与窗体级错误消息(或保存的用户内容)一起显示. - 没有数据的成功 - fs - 成功 - 如果没有
data-fs-success元素存在且无onSuccess提供回调,表格被替换为“谢谢!”消息. - 数据- fs- 成功 ——如果
data-fs-success元素存在且无onSuccess提供回调,在成功后重设窗体. - 默认样式 ——错误消息的基本样式,无效字段,消息横幅自动被注入.
额外数据
使用 data 选项。 值可以是静态字符串,同步函数,也可以是同步函数. undefined 数值被跳过.
initForm({
formElement: '#my-form',
formId: 'YOUR_FORM_ID',
data: {
source: 'landing-page',
referrer: () => document.referrer || undefined,
sessionId: async () => await fetchSessionId(),
},
});
样式
默认样式自动被注入. 您可以使用您的 CSS 来覆盖 :
/* Error message text */
[data-fs-error] {
color: #dc3545;
font-size: 12px;
}
/* Invalid field border */
[data-fs-field][aria-invalid='true'] {
border-color: #dc3545;
}
/* Success message banner */
[data-fs-success][data-fs-active] {
background: #d4edda;
color: #155724;
}
/* Form-level error banner */
[data-fs-error=''][data-fs-active] {
background: #f8d7da;
color: #721c24;
}
帮助和支持
请参看 表格文档。 。 。 .