Problem - want to show multiple errors when they occurred on this password field. I am using vee-validation and vee-validation/rules but the bails prop is not working at all I tried searching other places but didn't get what is happening here...
- I have rules for the password, that it should be required other than that I have the rules for a min of 5 char of pass but not working as expected.
password: 'required|min:5',
Configs
- Using Vuejs 3
- Using vee-validate:4.4.1
- using @vee-validate/rules:4.1.20
Current Output
Expected Output
Note: other than the code below I already defined all the important methods and the only problem occurs with the password field. I already used the bails props.
This is the code I am using
<template>
<!-- Registration Form -->
<vee-form v-show="!isLoginTab" :validation-schema="schema" @submit="register">
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<vee-field v-bind:bails="false" name="password" v-slot="{ field, errors }">
<input type="password" v-bind="field"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
duration-500 focus:outline-none focus:border-black rounded"
placeholder="Password"/>
<div class="text-red-600"
v-for="error, index in errors" :key="index"></div>
</vee-field>
</div>
</vee-form>
</template>
<script>
export default {
name: 'app-authModel',
data() {
return {
schema: {
name: 'required|min:3|max:20|alpha_spaces',
email: 'required|min:3|max:50|email',
age: 'required|between:18,100|numeric',
password: 'required|min:5',
confirm_password: 'confirmed:@password',
country: 'required|included:USA,Mexico,Germany',
tos: 'required',
},
};
},
};
</script>
Aucun commentaire:
Enregistrer un commentaire