zend-framework - Lamians/ZF3：将 CSS 类添加到无效的表单字段

Question

我想添加一个红色边框 - 例如通过添加一个 CSS 类 - 到无效的输入字段。最好的方法是什么？

或者 Laminas 是否已经为此内置了一些东西？

亲切的问候简

Answer 1

Laminas 实际上并不处理 CSS，因为这是前端的东西。请记住，这两种解决方案都需要将发布请求发送到您的服务器

解决方案 1

在您的视图中，您可以检查元素是否有错误消息，并添加一个附加类：

<?php $description = $this->form->get('description'); ?> 
<div class="form-group row<?= $this->formElementErrors($description) ? ' has-error' : ''; ?>">
    <?= $this->formLabel($description); ?>
    <div class="col-sm-10">
        <?= $this->formElement($description); ?>
        <span class="error-message">
            <?= $this->formElementErrors($description); ?>
        </span>
    </div>
</div>

在这个例子中，当一个元素有错误消息时（因此，输入无效），它会向它添加类has-error。该类来自Bootstrap，CSS 样式为：

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}

解决方案 2

看看Laminas FormElementErrors helper