Question

我尝试在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生产的html与zurb兼容。至少是这样，但是也许他们已经改变了？

验证失败时，CakePhp 3表单元素将被隐藏

产生的html：

0 个答案: