What is the method for making the input field border turn red in Vuejs when data is not entered?

Question

What is the method for making the input field border turn red in Vuejs when data is not entered?

.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)" />

Is there a way to change the border color of an input field to red using only CSS? Specifically, I want to achieve this effect when a user attempts to enter data in a second field without filling out the first one. The goal is for the border color of the first field to turn red in response. This needs to be accomplished without relying on Bootstrap Form-control.

html css vue.js

Answer 1

Answer №1

CSS has the ability to style an input element based on its value attribute. For instance:

input#mobile:not([value]) {
   border: 1px solid red;
}

However, it is not possible to dynamically track the HTML Element/Node's value as it changes in real-time. To achieve this functionality, a scripted solution may be necessary.

One approach is to use the oninput event to capture user input and update the value attribute accordingly. Alternatively, if you are utilizing a framework, setting the value attribute through that platform might be more appropriate.

<input type="text" id="mobile" oninput="this.setAttribute('value', this.value);" />

Answer 2

CSS has the ability to style an input element based on its value attribute. For instance:

input#mobile:not([value]) {
   border: 1px solid red;
}

However, it is not possible to dynamically track the HTML Element/Node's value as it changes in real-time. To achieve this functionality, a scripted solution may be necessary.

One approach is to use the oninput event to capture user input and update the value attribute accordingly. Alternatively, if you are utilizing a framework, setting the value attribute through that platform might be more appropriate.

<input type="text" id="mobile" oninput="this.setAttribute('value', this.value);" />

Answer 3

Answer №2

Here is an example of how to implement this:

/* Styling for non-empty inputs */
input:not(:placeholder-on) {
  /* Make sure to include a placeholder in your input fields. For example: <input "placeholder=" "/> */
  border-color: green;
}

/* Styling for empty inputs */
input:placeholder-on {
  border-color: red;
}

Answer 4

Here is an example of how to implement this:

/* Styling for non-empty inputs */
input:not(:placeholder-on) {
  /* Make sure to include a placeholder in your input fields. For example: <input "placeholder=" "/> */
  border-color: green;
}

/* Styling for empty inputs */
input:placeholder-on {
  border-color: red;
}

Answer 5

Answer №3

You've mentioned JavaScript in your query, so here's how you can achieve it using JS.

Firstly, select all input elements with the class 'input-section' using querySelectorAll. Then, add a blur eventListener on each input and check if the value is empty or has only white space by using `e.target.value.trim().length == 0`. If condition is met, apply a CSS class to change the style of the input tag; otherwise, remove that class.

const inputs = document.querySelectorAll('.input-section')

inputs.forEach(input => {
  input.addEventListener('blur', (e) => {
    if(e.target.value.trim().length == 0){
      e.target.classList.add('warning')
    }else{
      e.target.classList.remove('warning')
    }
  })
})

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

.warning {
  border: solid 2px #F00;
}

<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)" />

Answer 6

You've mentioned JavaScript in your query, so here's how you can achieve it using JS.

Firstly, select all input elements with the class 'input-section' using querySelectorAll. Then, add a blur eventListener on each input and check if the value is empty or has only white space by using `e.target.value.trim().length == 0`. If condition is met, apply a CSS class to change the style of the input tag; otherwise, remove that class.

const inputs = document.querySelectorAll('.input-section')

inputs.forEach(input => {
  input.addEventListener('blur', (e) => {
    if(e.target.value.trim().length == 0){
      e.target.classList.add('warning')
    }else{
      e.target.classList.remove('warning')
    }
  })
})

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

.warning {
  border: solid 2px #F00;
}

<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)" />

What is the method for making the input field border turn red in Vuejs when data is not entered?

Answer №1

Answer №2

Answer №3

Similar questions

Exploring with jQuery to discover the contents located at a specific X/Y position?

connecting data tables

Error: The 'path' value is undefined and cannot be searched for using the 'in' operator

Choosing a hyperlink within a cell depending on the surrounding text in that cell

Encountered a vue variable error while running db.each function

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

A property name needs to be included before the colon (' : ') in the declaration of a property value within an ASP.NET file

Troubleshooting issues with Jquery fadeIn and fadeOut - tips for implementing fadein animation using addclass and mouseover

Safari showing white flash upon setting background-image src using Intersection Observer?

Should I Change or Focus in jQuery? What event is best to use with a select dropdown in order to trigger a call to a jQuery-AJAX function?

PHP: Sending multiple values under a single name

How to vertically align content using Zurb Foundation's equalizer feature?

A step-by-step guide on utilizing NuxtLink to successfully pass data between pages

Troubleshooting a Vue.js issue: How to fix a watch function that stops working after modifying

Modifying the structure of serialized data

Best practices for managing data loading with composition API and onBeforeRouteUpdate

Adjustable table resembling the textbox editor in StackOverflow

Unable to retrieve module from directive template in Angular

Tips for transferring a JavaScript variable to a servlet

What is the method for eliminating the box shadow on a table?