0👍
when I click on one it marks the other, how can I do this in different inputs
It is actually not marking the other, it is most likely marking them both at the same time, since you are using a single variable validInput to track validity of all the input fields, meaning if any of them fails, all of them will have the input-error class. The reason it might look like it is painting only the other one is because the focus border of the active one might mask your custom error style.
I am basing this on my experience with trying to recreate the issue:
https://codesandbox.io/s/smoosh-architecture-k4hduk?file=/src/components/HelloWorld.vue
A solution could be to introduce separate variables to track validation state of each input field separately, perhaps something like this:
const inputValidity = ref({
areaInput: false,
adressInput: false,
})
Then you can target these properties for example like this:
<template>
<input @input="validateAreaInput" />
</template>
<script>
...
const validateAreaInput = (input) => {
if (input) {
inputValidity.value.areaInput = true;
}
inputValidity.value.areaInput = false;
}
</script>
You can take this a lot further by defining validator functions for certain cases and assigning them to data properties, and then use a generic validator function where you only pass in the input and a field name. This is a rudimentary solution which doesn’t scale well, but i think will help to get off the ground. There are existing libraries to solve this kind of problem here are two of them for your consideration: