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

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

question from:https://stackoverflow.com/questions/65919170/lamians-zf3-adding-css-class-to-invalid-form-fields

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