Lamians/ZF3: Adding CSS Class to invalid Form Fields

Laminas doesn't actually handle CSS, since this is frontend stuff. Keep in mind that both solutions requires to send the post request to your server

Solution 1

Inside your view, you can check if an element has error messages, and add an additional class:

<?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>

In this exemple, when an element has error messages (therefore, the input is invalid), it adds the class has-error to it. This class comes from Bootstrap, and the CSS style is:

.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;
}

Solution 2

Take a look at Laminas FormElementErrors helper