I am managing a few input fields and storing their information in an object. My goal is to click on an input field to focus on it, and if the field is empty or has a length greater than or equal to 0, I want it to display a red border. If I type something in the field, the red border should be removed. Also, even if the value of the input is zero and I exit the field, the red border should disappear. I have a function that accomplishes this, but when I apply it to multiple inputs, clicking on one input affects the others. How can I ensure each input behaves independently?
inputs
<div class="superficie info" :class="{'input-error' : validInput}">
<label>area</label>
<input type="number" v-model="objInfo.area" @focus="inputFocus" @blur="inputBlur" @input="validatingInput">
</div>
<div class="address info" :class="{'input-error' : validInput}">
<label>address</label>
<input type="text" :value="objInfo.address" @focus="inputFocus" @blur="inputBlur" @input="validatingInput">
</div>
functions
const validInput= ref(false)
const inputFocus = (e) => {
if(objInfo.value.area === ''){
validInput.value = true
}
}
const inputBlur = (e) => {
validInput.value = false
}
const validatingInput = () => {
if(objInfo.value.area === ''){
validInput.value = true
return
}
validInput.value = false
}