lundi 31 mai 2021

bails prop in vee-validate and vee-field

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

enter image description here

Expected Output

enter image description here

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