Элемент формы CakePhp 3 скрывается при сбое проверки

Я пытаюсь создать форму в 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 6.5.3.

Что здесь не так? Я предположил, что Zurb и Cake «женаты», поэтому Cake создает html, совместимый с zurb. По крайней мере, так было, но, может быть, они изменились?


person Snorvarg    schedule 08.03.2019    source источник
comment
Я нашел более раннее сообщение о связи между zurb и тортом здесь: stackoverflow.com/questions/35745049/ .... проблема все еще существует, хотя html, созданный тортом, не «совместим» с zurb 6.5.   -  person Snorvarg    schedule 08.03.2019
comment
Я получил это после некоторых исследований: html/css, созданный тортом, кажется, просто устарел. Я решил использовать zurbs abide, проверку формы на стороне клиента. Однако означает двойную проверку, вечная боль веб-разработчиков. (на стороне клиента, затем проверка на стороне сервера)   -  person Snorvarg    schedule 08.03.2019
comment
удалите display: none; в вашем стиле CSS .form-error класса   -  person Fury    schedule 09.03.2019