css - 验证失败时,CakePhp 3 Form 元素被隐藏
问题描述
我尝试使用验证器在 Cakephp 3 中构建一个表单。问题是生成的 css,因为它隐藏了输入元素!
它在隐藏的输入元素下方显示错误消息。
带有架构和验证器的表单:
namespace App\Form;
use Cake\Form\Form;
use Cake\Form\Schema;
use Cake\Validation\Validator;
class ContactForm extends Form
{
protected function _buildSchema(Schema $schema)
{
return $schema
->addField('name', 'string')
->addField('email', ['type' => 'email'])
->addField('message', 'string');
}
protected function _buildValidator(Validator $validator)
{
return $validator
->add('name', 'length', [
'rule' => ['minLength', 1],
'message' => _('Please fill in your name')
])
->add('email', 'format', [
'rule' => 'email',
'message' => __('This must be a valid email address')
])
->add('message', 'length', [
'rule' => ['minLength', 15],
'message' => __('The message must be at least 15 characters')
]);
}
protected function _execute(array $data)
{
return true;
}
}
.ctp 文件的格式代码:
echo $this->Form->create($form);
echo $this->Form->input('name', ['title' => __('Name')]);
echo $this->Form->input('email', ['title' => __('Email')]);
echo $this->Form->input('message', ['title' => __('Message')]);//, 'type' => 'textarea']);
echo $this->Form->submit(__('Submit'), ['class' => 'button top-margin']);
echo $this->Form->end();
控制器中的代码:
$form = new ContactForm();
if($this->request->is(['post', 'put']))
{
if($form->execute($this->request->getData()))
{
// Values seem correct. Push away an email to support!
$data = $this->request->data;
}
else
{
$this->Flash->error(__('There was a problem submitting your form. Please check the error message below each input field.'));
}
}
$this->set('form', $form);
如果我显示表单,添加一些姓名和电子邮件,但在消息输入字段中保留一个字母,则验证将按预期失败,并显示错误消息“消息必须至少为 15 个字符”。
但是 css 类的“form-error”被设置为输入字段,这完全隐藏了输入字段!
生成的html:
<div class="input text required error"><label for="message">Message</label>
<input type="text" name="message" title="Message" required="required" id="message" class="form-error" value="a">
<div class="error-message">The message must be at least 15 characters</div>
</div>
“表单错误”的 CSS:
.form-error {
display: none;
margin-top: -0.5rem;
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: bold;
color: #cc4b37;
}
使用 CakePHP 版本:3.5.17 和 Zurb Foundation 6.5.3。
这里有什么问题?我假设 Zurb 和 Cake 是“已婚”,所以 cake 生成与 zurb 兼容的 html。至少它一直是这样,但也许他们已经改变了?
解决方案
推荐阅读
- android - I/O 错误:类路径资源 [] 无法解析为 URL,因为它不存在;
- xpath - 我需要在 xpath 中指定命名空间吗?
- php - 如何通过PHP中的正则表达式打破字符串
- spring - Maven:我可以在同一个 Eclipse 项目中拥有父模块和子模块吗?
- python - 创建训练和验证小批量
- algorithm - 这个三重嵌套循环的大 O?
- android - 带有 Kotlin 协程的房间观察数据库变化
- vb.net - 如何使用 HDF.Pinvoke 读取 HDF5 数据集?
- c - gcc 基本 C 程序无法编译:Ubuntu 中缺少文件
- sql-server - SSMS 数据库创建在什么用户下运行?