I am using vue 3 and vueValidate to validate my form. https://vee-validate.logaretm.com/v4/guide/composition-api/api-review Here is my simple form. If the the input filed is empty, it should show error and if the input field is not empty it should show success. But currently it shows error even if the form is submitted after filling it. I am not sure why it is showing error in both cases. Can you please tell me how to display vlidation error message.
<form @submit="submitForm">
<input
v-model="name" type="text"
/>
<button type="submit">Submit</button>
</form>
js
<script setup>
import { ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required } from "@vuelidate/validators"
const formData = ref({
name:''
})
const rules = {
name: { required }
}
const v$ = useVuelidate(rules,formData);
console.log(v$);
const submitForm = async () => {
const result = await v$.value.$validate();
if(result) {
alert('success')
}else{
alert('error')
}
}
</script>
