How to highlight border color of input field when error message display in Vuejs?

Question

I have an input field, where with the help of maxlength I am checking the length of input field and displaying the error message like "30 har only". So now I need to highlight the border color to red when the error message appears.

<div class="input-wrapper">
                <div class="name-icon"></div>
                <input
                  type="text"
                  name="fullname"
                  id="fullname"
                  v-model="fullname"
                  v-model.trim="$v.fullname.$model"
                  :class="{ 'is-invalid': validationStatus($v.fullname) }"    
                   class="input-section"
                  :maxlength="max"
                  v-validate="'required'"
                  v-on:keypress="isLetter($event)"
                  placeholder="Enter your name"
                />

                <div v-if="!$v.fullname.maxLength" class="error-messages">
                  You can enter 30 characters
                  {{ $v.fullname.$params.maxLength.min }} only.
                </div>
              </div>

.input-section {
  border-radius: 4px;
  width: 359px;
  height: 42px;
  line-height: 42px;
  padding: 0 45px;
  border-radius: 4px;
  border: solid 1px #b1b8c9;
  background-color: #ffffff;
}

Answer 1

You can use the $invalid state to add a CSS class with border like:

class="form__input" v-bind:class="{'error-boarder' : $v.age.$invalid}"

CSS class:

.error-boarder {
  border-color: red;
}

---

Old answer : Try using the :invalid CSS pseudo class:

.input-sectio:invalid {
  background-color: red;
}