hyva-cms-component by hyva-themes/hyva-ai-tools
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-cms-component此技能指导交互式创建适用于 Magento 2 的自定义 Hyvä CMS 组件。它支持在新模块或现有模块中创建组件,提供常见模式的字段预设,并自动执行 setup:upgrade。
命令执行: 对于需要在开发环境内运行的命令(例如 bin/magento),请使用 hyva-exec-shell-cmd 技能来检测环境并确定适当的命令包装器。
如果提示中未指定,请询问用户在哪里创建组件:
选项 A:新建模块
询问以下两个值(不要在不询问的情况下假设默认值):
Acme)- 必需,无默认值。不要建议供应商名称,请提示用户输入。CmsComponents,以便用户按 Enter 键接受然后使用 hyva-create-module 技能,参数如下:
dependencies: 广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
["Hyva_CmsBase"]composer_require: {"hyva-themes/commerce-module-cms": "^1.0"}选项 B:现有模块
app/code/、vendor/ 或自定义位置)etc/module.xml 中是否已将 Hyva_CmsBase 作为依赖项。如果不存在,则添加。composer.json 中是否已将 hyva-themes/commerce-module-cms 作为依赖项。如果不存在,则添加。收集组件信息:
feature_card)步骤 4a:识别已使用的图标 使用 hyva-cms-components-dump 技能来转储所有当前的 CMS 组件。从输出中提取所有 icon 值,以构建现有组件已使用的图标列表。
步骤 4b:查找可用的 lucide 图标 列出 vendor/hyva-themes/magento2-theme-module/src/view/base/web/svg/lucide/ 中的 SVG 文件,以获取完整的可用图标集。
步骤 4c:选择最匹配的图标 从可用的 lucide 图标中(且未被其他组件使用过的):
* 选择其名称最能匹配新组件用途/含义的图标
* 考虑语义含义(例如,购物车相关用 `shopping-cart.svg`,图片相关用 `image.svg`,网格布局用 `layout-grid.svg`)
* 将选定的图标格式化为 `Hyva_Theme::svg/lucide/[图标名称].svg`
如果找不到合适的未使用图标,或者 lucide 目录不存在,则不设置 icon 属性。
提供字段预设或自定义字段创建。有关可用预设(基本卡片、图片卡片、CTA 区块、文本区块、功能项、推荐语、手风琴项),请参阅 references/field-types.md 的 "字段预设" 部分,或允许自定义字段定义。
对于自定义字段,遍历每个字段并询问:
references/field-types.md)attributes.required 添加,而不是作为直接的字段属性attributes 对象中)询问组件是否需要模板变体:
references/variant-support.md。创建所需的文件:
hyva-create-module 技能创建基础模块结构。然后添加 CMS 特定目录:
app/code/[Vendor]/[Module]/
├── registration.php # 由 hyva-create-module 创建
├── composer.json # 由 hyva-create-module 创建
├── etc/
│ ├── module.xml # 由 hyva-create-module 创建
│ └── hyva_cms/
│ └── components.json # 创建此文件
└── view/
└── frontend/
└── templates/
└── elements/
└── [component-name].phtml (或 [component-name]/ 用于变体)
创建或更新:
etc/hyva_cms/components.json(如果存在,则与现有内容合并)view/frontend/templates/elements/[component-name].phtml创建文件后,使用 hyva-exec-shell-cmd 技能检测到的适当命令包装器运行 bin/magento setup:upgrade。
{
"[component_name]": {
"label": "[Label]",
"category": "[Category]",
"template": "[Vendor]_[Module]::elements/[component-name].phtml",
"content": {
// 生成的字段
},
"design": {
"includes": [
"Hyva_CmsBase::etc/hyva_cms/default_design.json",
"Hyva_CmsBase::etc/hyva_cms/default_design_typography.json"
]
},
"advanced": {
"includes": [
"Hyva_CmsBase::etc/hyva_cms/default_advanced.json"
]
}
}
}
重要提示: 只有特定的属性允许在组件级别使用。有关完整的模式参考,请参阅 references/component-schema.md。
关键属性:label(必需)、category、template、icon、children、require_parent、content、design、advanced、disabled、custom_properties。
会导致模式错误的无效属性:
hidden - 不存在。对于仅作为子组件的组件,使用 require_parent: true,或使用 disabled: true重要提示: children 是一个根级别的组件属性,而不是 content、design 或 advanced 中的字段类型。
错误 ❌:
{
"my_component": {
"content": {
"items": {
"type": "children",
"label": "Items"
}
}
}
}
正确 ✅:
{
"my_component": {
"label": "My Component",
"children": {
"config": {
"accepts": ["child_component"],
"max_children": 10
}
},
"content": {
"title": {
"type": "text",
"label": "Title"
}
}
}
}
在模板中,通过 $block->getData('children') 访问子组件,而不是通过自定义字段名。
重要提示: 字段验证属性如 required 必须放在 attributes 对象中,而不是作为直接的字段属性。
错误 ❌:
{
"title": {
"type": "text",
"label": "Title",
"required": true
}
}
正确 ✅:
{
"title": {
"type": "text",
"label": "Title",
"attributes": {
"required": true
}
}
}
其他放在 attributes 中的验证属性:
required(布尔值)minlength / maxlength(字符串)min / max(用于数字)pattern(正则表达式字符串)placeholder(字符串)comment(帮助文本)对于应仅用作其他组件子组件的组件(如列表项),使用 require_parent: true:
{
"my_list_item": {
"label": "My List Item",
"category": "Elements",
"require_parent": true,
"template": false,
"content": {
"title": {"type": "text", "label": "Title"}
}
},
"my_list": {
"label": "My List",
"category": "Elements",
"template": "Vendor_Module::elements/my-list.phtml",
"children": {
"config": {
"accepts": ["my_list_item"]
}
}
}
}
当 template: false 时,父组件直接渲染子数据(不使用 $block->createChildHtml())。请参阅下面的 "使用 template: false 渲染子组件"。
每个模板必须以以下头部开始:
<?php
declare(strict_types=1);
use Hyva\CmsLiveviewEditor\Block\Element;
use Hyva\Theme\Model\ViewModelRegistry;
use Magento\Framework\Escaper;
/** @var Element $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
附加要求:
$block->getEditorAttrs()$block->getEditorAttrs('field_name')$escaper->escapeHtml() 和 $escaper->escapeHtmlAttr()文本字段:
$title = $block->getData('title');
// 在模板中:
<?php if ($title): ?>
<h2 <?= /** @noEscape */ $block->getEditorAttrs('title') ?>>
<?= $escaper->escapeHtml($title) ?>
</h2>
<?php endif; ?>
富文本/HTML 字段:
$content = $block->getData('content');
// 在模板中(富文本无需转义):
<?php if ($content): ?>
<div <?= /** @noEscape */ $block->getEditorAttrs('content') ?>>
<?= /** @noEscape */ $content ?>
</div>
<?php endif; ?>
图片字段:
使用 hyva-render-media-image 技能来渲染图片。它提供了 \Hyva\Theme\ViewModel\Media 视图模型的完整 API 参考和代码模式。
渲染图片时添加这些导入:
// 用于包含图片的模板的附加导入:
use Hyva\Theme\ViewModel\Media;
/** @var Media $mediaViewModel */
$mediaViewModel = $viewModels->require(Media::class);
来自 $block->getData('image') 的数据可以直接传递给 getResponsivePictureHtml():
$image = $block->getData('image');
// 在模板中:
<?php if ($image): ?>
<?= /** @noEscape */ $mediaViewModel->getResponsivePictureHtml(
$image,
['class' => 'w-full h-auto', 'loading' => 'lazy']
) ?>
<?php endif; ?>
对于具有独立桌面和移动端源的响应式图片,请参阅 hyva-render-media-image 技能。
链接字段:
$link = $block->getData('link');
$linkData = $link ? $block->getLinkData($link) : null;
// 在模板中:
<?php if ($linkData): ?>
<a href="<?= $escaper->escapeUrl($linkData['url']) ?>"
<?php if (!empty($linkData['target'])): ?>target="<?= $escaper->escapeHtmlAttr($linkData['target']) ?>"<?php endif; ?>>
<?= $escaper->escapeHtml($linkData['title'] ?: 'Read more') ?>
</a>
<?php endif; ?>
布尔字段:
$showTitle = (bool) $block->getData('show_title');
// 在模板中:
<?php if ($showTitle && $title): ?>
<!-- title markup -->
<?php endif; ?>
选择字段:
$style = $block->getData('style') ?: 'default';
$styleClasses = match($style) {
'primary' => 'bg-blue-600 text-white',
'secondary' => 'bg-gray-200 text-gray-800',
default => 'bg-white text-gray-600'
};
子组件字段(拥有自己的模板):
当子组件拥有自己的模板时(默认行为),使用 $block->createChildHtml():
$children = $block->getData('children') ?: [];
// 在模板中:
<?php foreach ($children as $index => $child): ?>
<?= /** @noEscape */ $block->createChildHtml($child, 'child-' . $index) ?>
<?php endforeach; ?>
使用 template: false 渲染子组件:
当子组件拥有 "template": false 时,父组件直接渲染它们。子数据是扁平的 - 字段值直接在子数组上,而不是嵌套在 content 键下。
$children = $block->getData('children') ?: [];
// 在模板中 - 遍历并直接访问子数据:
<?php foreach ($children as $elementData): ?>
<?php
// 直接在 $elementData 上访问字段(而不是 $elementData['content']['field'])
$image = $elementData['image'] ?? null;
$title = $elementData['title'] ?? '';
$description = $elementData['description'] ?? '';
// 每个子组件都有一个用于编辑器属性的 'uid'
$childUid = $elementData['uid'];
?>
<div <?= /** @noEscape */ $block->getEditorAttrs('', $childUid) ?>>
<?php if (!empty($image['src'])): ?>
<?php // 关于图片渲染模式,请参阅 hyva-render-media-image 技能 ?>
<?= /** @noEscape */ $mediaViewModel->getResponsivePictureHtml(
[$block->getResponsiveImageData($image)],
['alt' => $image['alt'] ?? '', 'class' => 'w-full h-auto', 'loading' => 'lazy']
) ?>
<?php endif; ?>
<p <?= /** @noEscape */ $block->getEditorAttrs('title', $childUid) ?>>
<?= $escaper->escapeHtml($title) ?>
</p>
</div>
<?php endforeach; ?>
template: false 子组件的关键点:
$elementData['field_name'],而不是 $elementData['content']['field_name']uid 属性$block->getEditorAttrs('field_name', $childUid) 来启用子字段的实时编辑$block->getEditorAttrs('', $childUid)!empty($image['src']) 并使用 $block->getResponsiveImageData($image) 来处理图片数据hyva-render-media-image 技能首先阅读此文件 - 基本模式和常见错误,包括:
children 配置(根级别与字段类型)attributes 进行适当的字段验证在生成任何组件之前阅读此文件,以避免常见错误。
完整的端到端示例,展示了一个功能卡片组件,包括:
components.json 定义当您需要参考所有部分如何组合在一起时,请阅读此文件。
组件声明的完整模式参考,根据 Hyvä CMS JSON 模式自动生成。包括:
验证组件结构或遇到模式验证错误时,请阅读此文件。
Hyvä CMS 更新后,运行 scripts/update_component_schema.php 以重新生成。
所有支持的字段类型的完整参考,包括:
生成字段配置时,请阅读此文件。
实现模板变体的指南,包括:
当用户希望组件有多个布局选项时,请阅读此文件。
常见问题的解决方案,包括:
在组件创建或测试期间遇到错误时,请阅读此文件。
PHP 脚本,读取 Hyvä CMS JSON 模式文件并重新生成 references/component-schema.md。升级 hyva-themes/commerce-module-cms 后运行,以确保文档保持最新。
CMS 组件的基础 PHTML 结构。
占位符:
{{CONTENT_FIELDS}} - PHP 变量声明{{TEMPLATE_BODY}} - HTML 模板内容getEditorAttrs()<script> 标签 - 通过 alpine:init 事件使用 Alpine.jsdefault_value 键,而不是 default - 默认值的正确 JSON 键是 default_value(带下划线),而不是 default。示例:"default_value": "My Title" ✅,而不是 "default": "My Title" ❌children 是根级别属性,不是字段类型 - 切勿在 content/design/advanced 中使用 "type": "children"。在组件根级别声明 children。在模板中通过 $block->getData('children') 访问。attributes 中,而不是作为直接属性 - 使用 "attributes": {"required": true} ✅,而不是 "required": true ❌。所有 HTML5 验证属性(required、minlength、maxlength、pattern、min、max)必须放在 attributes 对象内。每周安装次数
163
仓库
GitHub 星标数
59
首次出现
2026年1月27日
安全审计
安装于
github-copilot160
opencode157
codex157
gemini-cli152
amp150
kimi-cli150
This skill guides the interactive creation of custom Hyvä CMS components for Magento 2. It supports creating components in new or existing modules, with field presets for common patterns and automatic setup:upgrade execution.
Command execution: For commands that need to run inside the development environment (e.g., bin/magento), use the hyva-exec-shell-cmd skill to detect the environment and determine the appropriate command wrapper.
If not already specified in the prompt, ask the user where to create the component:
Option A: New Module
Ask for both values (do not assume defaults without asking):
Acme) - Required, no default. Do not suggest a Vendor name, prompt for user input.CmsComponents as default so user can press Enter to acceptThen use the hyva-create-module skill with:
dependencies: ["Hyva_CmsBase"]composer_require: {"hyva-themes/commerce-module-cms": "^1.0"}Option B: Existing Module
app/code/, vendor/, or custom location)Hyva_CmsBase as a dependency in etc/module.xml. If not present, add it.hyva-themes/commerce-module-cms as a dependency in composer.json. If not present, add it.Gather component information:
Component name (snake_case, e.g., feature_card)
Label (display name in editor, e.g., "Feature Card")
Category (Layout, Elements, Media, Content, or Other)
Icon - Automatically select an appropriate icon:
Step 4a: Identify icons already in use Use the hyva-cms-components-dump skill to dump all current CMS components. Extract all icon values from the output to build a list of icons already in use by existing components.
Step 4b: Find available lucide icons List the SVG files in vendor/hyva-themes/magento2-theme-module/src/view/base/web/svg/lucide/ to get the full set of available icons.
Step 4c: Select the best fitting icon From the available lucide icons that are NOT already in use by another component:
* Choose the icon whose name best matches the purpose/meaning of the new component
* Consider semantic meaning (e.g., `shopping-cart.svg` for cart-related, `image.svg` for image-related, `layout-grid.svg` for grid layouts)
* Format the selected icon as `Hyva_Theme::svg/lucide/[icon-name].svg`
If no suitable unused icon can be found, or if the lucide directory doesn't exist, leave the icon property unset.
Offer field presets or custom field creation. See references/field-types.md "Field Presets" section for available presets (Basic Card, Image Card, CTA Block, Text Block, Feature Item, Testimonial, Accordion Item) or allow custom field definition.
For custom fields, iterate through each field asking:
references/field-types.md)attributes.required, NOT as a direct field propertyattributes object)Ask if the component needs template variants:
references/variant-support.md for configuration details.Create the required files:
The hyva-create-module skill creates the base module structure. Then add the CMS-specific directories:
app/code/[Vendor]/[Module]/
├── registration.php # Created by hyva-create-module
├── composer.json # Created by hyva-create-module
├── etc/
│ ├── module.xml # Created by hyva-create-module
│ └── hyva_cms/
│ └── components.json # Create this
└── view/
└── frontend/
└── templates/
└── elements/
└── [component-name].phtml (or [component-name]/ for variants)
Create or update:
etc/hyva_cms/components.json (merge with existing if present)view/frontend/templates/elements/[component-name].phtmlAfter creating files, run bin/magento setup:upgrade using the appropriate command wrapper detected by the hyva-exec-shell-cmd skill.
{
"[component_name]": {
"label": "[Label]",
"category": "[Category]",
"template": "[Vendor]_[Module]::elements/[component-name].phtml",
"content": {
// Generated fields
},
"design": {
"includes": [
"Hyva_CmsBase::etc/hyva_cms/default_design.json",
"Hyva_CmsBase::etc/hyva_cms/default_design_typography.json"
]
},
"advanced": {
"includes": [
"Hyva_CmsBase::etc/hyva_cms/default_advanced.json"
]
}
}
}
IMPORTANT: Only specific properties are allowed at the component level. See references/component-schema.md for the complete schema reference.
Key properties: label (required), category, template, icon, children, require_parent, content, design, advanced, disabled, custom_properties.
Invalid properties that will cause schema errors:
hidden - Does not exist. Use require_parent: true for child-only components, or disabled: trueIMPORTANT: children is a ROOT-LEVEL component property, NOT a field type within content, design, or advanced.
INCORRECT ❌:
{
"my_component": {
"content": {
"items": {
"type": "children",
"label": "Items"
}
}
}
}
CORRECT ✅:
{
"my_component": {
"label": "My Component",
"children": {
"config": {
"accepts": ["child_component"],
"max_children": 10
}
},
"content": {
"title": {
"type": "text",
"label": "Title"
}
}
}
}
In templates, access children via $block->getData('children'), NOT via a custom field name.
IMPORTANT: Field validation attributes like required must be placed in the attributes object, NOT as direct field properties.
INCORRECT ❌:
{
"title": {
"type": "text",
"label": "Title",
"required": true
}
}
CORRECT ✅:
{
"title": {
"type": "text",
"label": "Title",
"attributes": {
"required": true
}
}
}
Other validation attributes that go in attributes:
required (boolean)minlength / maxlength (string)min / max (for numbers)pattern (regex string)placeholder (string)comment (help text)For components that should only be used as children of other components (like list items), use require_parent: true:
{
"my_list_item": {
"label": "My List Item",
"category": "Elements",
"require_parent": true,
"template": false,
"content": {
"title": {"type": "text", "label": "Title"}
}
},
"my_list": {
"label": "My List",
"category": "Elements",
"template": "Vendor_Module::elements/my-list.phtml",
"children": {
"config": {
"accepts": ["my_list_item"]
}
}
}
}
When template: false, the parent component renders the child data directly (NOT using $block->createChildHtml()). See "Rendering Children with template: false" below.
Every template must start with this header:
<?php
declare(strict_types=1);
use Hyva\CmsLiveviewEditor\Block\Element;
use Hyva\Theme\Model\ViewModelRegistry;
use Magento\Framework\Escaper;
/** @var Element $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
Additional requirements:
$block->getEditorAttrs() on root element$block->getEditorAttrs('field_name') on editable elements$escaper->escapeHtml() and $escaper->escapeHtmlAttr()Text fields:
$title = $block->getData('title');
// In template:
<?php if ($title): ?>
<h2 <?= /** @noEscape */ $block->getEditorAttrs('title') ?>>
<?= $escaper->escapeHtml($title) ?>
</h2>
<?php endif; ?>
Richtext/HTML fields:
$content = $block->getData('content');
// In template (no escaping for richtext):
<?php if ($content): ?>
<div <?= /** @noEscape */ $block->getEditorAttrs('content') ?>>
<?= /** @noEscape */ $content ?>
</div>
<?php endif; ?>
Image fields:
Use the hyva-render-media-image skill for rendering images. It provides the complete API reference and code patterns for the \Hyva\Theme\ViewModel\Media view model.
Add these imports when rendering images:
// Additional imports for templates with images:
use Hyva\Theme\ViewModel\Media;
/** @var Media $mediaViewModel */
$mediaViewModel = $viewModels->require(Media::class);
The data from $block->getData('image') can be passed directly to getResponsivePictureHtml():
$image = $block->getData('image');
// In template:
<?php if ($image): ?>
<?= /** @noEscape */ $mediaViewModel->getResponsivePictureHtml(
$image,
['class' => 'w-full h-auto', 'loading' => 'lazy']
) ?>
<?php endif; ?>
For responsive images with separate desktop and mobile sources, see the hyva-render-media-image skill.
Link fields:
$link = $block->getData('link');
$linkData = $link ? $block->getLinkData($link) : null;
// In template:
<?php if ($linkData): ?>
<a href="<?= $escaper->escapeUrl($linkData['url']) ?>"
<?php if (!empty($linkData['target'])): ?>target="<?= $escaper->escapeHtmlAttr($linkData['target']) ?>"<?php endif; ?>>
<?= $escaper->escapeHtml($linkData['title'] ?: 'Read more') ?>
</a>
<?php endif; ?>
Boolean fields:
$showTitle = (bool) $block->getData('show_title');
// In template:
<?php if ($showTitle && $title): ?>
<!-- title markup -->
<?php endif; ?>
Select fields:
$style = $block->getData('style') ?: 'default';
$styleClasses = match($style) {
'primary' => 'bg-blue-600 text-white',
'secondary' => 'bg-gray-200 text-gray-800',
default => 'bg-white text-gray-600'
};
Children fields (with their own templates):
When child components have their own templates (default behavior), use $block->createChildHtml():
$children = $block->getData('children') ?: [];
// In template:
<?php foreach ($children as $index => $child): ?>
<?= /** @noEscape */ $block->createChildHtml($child, 'child-' . $index) ?>
<?php endforeach; ?>
Rendering Children withtemplate: false:
When child components have "template": false, the parent component renders them directly. Child data is flat - field values are directly on the child array, NOT nested under a content key.
$children = $block->getData('children') ?: [];
// In template - iterate and access child data directly:
<?php foreach ($children as $elementData): ?>
<?php
// Access fields directly on $elementData (NOT $elementData['content']['field'])
$image = $elementData['image'] ?? null;
$title = $elementData['title'] ?? '';
$description = $elementData['description'] ?? '';
// Each child has a 'uid' for editor attributes
$childUid = $elementData['uid'];
?>
<div <?= /** @noEscape */ $block->getEditorAttrs('', $childUid) ?>>
<?php if (!empty($image['src'])): ?>
<?php // For image rendering patterns, see the hyva-render-media-image skill ?>
<?= /** @noEscape */ $mediaViewModel->getResponsivePictureHtml(
[$block->getResponsiveImageData($image)],
['alt' => $image['alt'] ?? '', 'class' => 'w-full h-auto', 'loading' => 'lazy']
) ?>
<?php endif; ?>
<p <?= /** @noEscape */ $block->getEditorAttrs('title', $childUid) ?>>
<?= $escaper->escapeHtml($title) ?>
</p>
</div>
<?php endforeach; ?>
Key points fortemplate: false children:
$elementData['field_name'], NOT $elementData['content']['field_name']uid property for editor attributes$block->getEditorAttrs('field_name', $childUid) to enable live editing of child fields$block->getEditorAttrs('', $childUid) on the child's root element!empty($image['src']) and use $block->getResponsiveImageData($image) to process the image datahyva-render-media-image skillREAD THIS FIRST - Essential patterns and common mistakes including:
children configuration (root-level vs field type)attributesRead this file before generating any component to avoid common errors.
Complete end-to-end example showing a Feature Card component with:
components.json definitionRead this file when you need a reference for how all the pieces fit together.
Complete schema reference for component declarations, auto-generated from the Hyvä CMS JSON schema. Includes:
Read this file when validating component structure or when encountering schema validation errors.
Run scripts/update_component_schema.php after Hyvä CMS updates to regenerate.
Complete reference for all supported field types including:
Read this file when generating field configurations.
Guide for implementing template variants including:
Read this file when the user wants multiple layout options for a component.
Solutions for common issues including:
Read this file when encountering errors during component creation or testing.
PHP script that reads the Hyvä CMS JSON schema files and regenerates references/component-schema.md. Run after upgrading hyva-themes/commerce-module-cms to ensure documentation stays current.
Base PHTML structure for CMS components.
Placeholders:
{{CONTENT_FIELDS}} - PHP variable declarations{{TEMPLATE_BODY}} - HTML template contentgetEditorAttrs() on the root element and on each editable field element<script> tags in templates - use Alpine.js via alpine:init eventdefault_value key, NOT default - The correct JSON key for default values is default_value (with underscore), not default. Example: ✅, NOT ❌Weekly Installs
163
Repository
GitHub Stars
59
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot160
opencode157
codex157
gemini-cli152
amp150
kimi-cli150
Laravel架构模式指南:生产级开发模式与最佳实践
886 周安装
"default_value": "My Title""default": "My Title"children is a root-level property, NOT a field type - Never use "type": "children" in content/design/advanced. Declare children at component root level. Access via $block->getData('children') in templates.attributes, NOT as direct properties - Use "attributes": {"required": true} ✅, NOT "required": true ❌. All HTML5 validation attributes (required, minlength, maxlength, pattern, min, max) must be inside the attributes object.