How to highlight border of input field in red color if i does not enter the data?

  css, html, javascript
.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;
}
<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" v-on:keypress="isLetter($event)" placeholder="Enter your name" />


<input class="input-section label-set" type="text" id="mobile" v-model="mobile" v-model.trim="$v.mobile.$model" :class="{ 'is-invalid': validationStatus($v.mobile) }" placeholder="Enter your mobile number" v-on:keypress="isMobile($event)" />

How would I highlight the border of the input field in red? Suppose I have two fields. Without entering one field if user try to enter in the second field, then the border color of the first field should change to red, else to normal.

I have an idea to do this using bootstrap Form-control but, I want to use it in css.

Source: Ask Javascript Questions

LEAVE A COMMENT