Hi there,
I am using vee-validate to validate my forms.
If I got a rule like required: false, integer: true, a form input like "k123" is being validated without any error.
I added these rules:
import * as rules from 'vee-validate/dist/rules';
[...]
// Add rules
Object.keys(rules).forEach(rule => {
extend(rule, rules[rule]);
});
Later I added this component:
<template>
<ValidationProvider :rules="{ required: false, integer: true }" v-slot="{ errors }" v-bind="$attrs">
{{required}}
<b-input
:id="'form-'+name"
:name="'form-'+name"
:value="value"
type="number"
:state="errors[0] ? false : null"
v-model="innerValue"
v-bind="$attrs" />
{{innerValue}}{{errors}}
</ValidationProvider>
</template>
<script>
import {ValidationProvider} from 'vee-validate';
export default {
name: 'Integer',
props: {
name: String,
value: [Number, String],
},
components: {
ValidationProvider
},
data: () => ({
innerValue: ''
}),
watch: {
innerValue (newVal) {
this.$emit('input', newVal);
},
value (newVal) {
this.innerValue = newVal;
}
},
created () {
if (this.value) {
this.innerValue = this.value;
}
}
}
</script>
Input K123 shows error as "K" it is not an integer.
Once required is set to true it is working as expected. If required is set to false the integer is not validated correctly and there is no error shown.