Lamians/ZF3: Adding CSS Class to invalid Form Fields - zend-framework

Question

I would like to add an Red Border - for example through adding an CSS Class - to invalid input fields. What is the best way to do so ?
Or does Laminas already have something built in for this ?
kind regards
Jan

Answer 1

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