Having trouble with a VeeValidate example from the documentation. The example can be found here. I seem to be missing something crucial but can't figure out what it is.
For some reason, my form always validates as valid, even when no text is entered in the input fields. Could it be that I need to customize the required rule in some way? Check out the CodeSandbox here
<template>
<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
<input type="text" rules="required">
<br>
<input type="text" rules="required">
<br>
<button :disabled="invalid">Submit</button>
</ValidationObserver>
</template>
<script>
import { ValidationObserver } from "vee-validate";
export default {
components: {
ValidationObserver
},
methods: {
async submit() {
const isValid = await this.$refs.observer.validate();
console.log("Form is valid", isValid);
if (!isValid) {
// ABORT!!
}
// 🐿 ship it
}
}
};
</script>