Dynamic Validation Vue Vee Validate

Question

Hello i want to validate dynamic fields using vee validate, Fields having the same name. 
For Example 



 
 
 
 
 
 {{ field.label }}
 
 
 
 
 
 
 
 Add Location

Lauris · Answer

Hi Syed,

The name attribute value should be unique for each field. 

You can use your key variable to make name value unique and then use the name for validation.

:name="`${field.name}-${key}`"


Regards,
Lauris Stepanovs,
Keenthemes Support Team

Syed · Answer

{{ field.label }}
 
 
 
 
 
 
 
 Add Location
 
 
 
 



 import { defineComponent,computed } from "vue";
 import { Field, ErrorMessage } from "vee-validate";
 import {mask} from 'vue-the-mask'
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { Actions } from "@/store/enums/StoreEnums";
 import { Mutations } from "@/store/enums/StoreEnums";
 import * as Yup from 'yup';

 export default defineComponent({
 name: "step-2",
 components: {
 Field,
 ErrorMessage,
 },
 directives: {
 mask: (el, binding) => {
 if (!binding.value) {
 return;
 }
 mask(el, binding);
 }
 },
 setup () {

 },
 data: function () {
 const count = 1;
 const formSchema = {
 fields: [
 {
 label: 'Shipper Contact Person',
 name: `shipper_contact_person`,
 id: `shipper_contact_person`,
 as: 'input',
 class: 'form-control form-control-lg form-control-solid',

 },
 {
 id: `shipper_phone_number`,
 label: 'Shipper Phone Number',
 name: 'shipper_phone_number',
 class: 'form-control form-control-lg form-control-solid',
 as: 'input',
 mask:"####-#######",

 },
 {
 id: `shipper_email`,
 label: 'Shipper Email Address',
 name: `shipper_email`,
 class: 'form-control form-control-lg form-control-solid',
 as: 'input',

 },
 {
 id: `shipper_city`,
 label: 'Shipper City',
 name: `shipper_city`,
 class: 'form-control form-control-lg form-control-solid',
 as: 'input',

 },
 {
 id: `shipper_address`,
 label: 'Shipper Address',
 name: `shipper_address`,
 class: 'form-control form-control-lg form-control-solid',
 as: 'textarea',

 },
 {
 id: `shipper_brand_name`,
 label: 'Brand Name',
 name: `shipper_brand_name`,
 class: 'form-control form-control-lg form-control-solid',
 as: 'input',

 },
 {
 id: `shipper_cnic`,
 label: 'CNIC#',
 name: `shipper_cnic`,
 class: 'form-control form-control-lg form-control-solid',
 as: 'input',
 mask : "#####-#######-#"
 },
 ],
 };
 return {
 count,
 values: {},
 formSchema,
 }
 },
 methods: {
 add: function(){
 this.count++;
 },
 remove: function () {
 this.count--;
 },
 submit: function(){
 // for (var key of Object.keys(this.values)) {
 // console.log(key + " -> " + this.values[key])
 // }
 }


 }
 });










 
 
 
 
 Sign Up
 
 
 
 Already have an account?

 
 Sign in here
 
 
 
 
 
 
 
 
 
 
 
 
 
 Profile Information
 
 

 
 
 Shipping Information
 
 

 
 
 Banking Information
 

 

 
 
 Documents & Legal
 
 

 
 
 Login Information
 
 
 
 

 
 
 
 
 
 
 

 
 
 
 
 

 
 
 
 
 

 
 
 
 
 

 
 
 
 
 

 
 
 
 
 
 
 
 
 Back
 
 
 

 
 
 
 
 Submit
 
 
 
 
 
 Please wait...
 
 
 

 
 Continue
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



 import { computed, defineComponent, onMounted, ref } from "vue";
 import { StepperComponent } from "@/assets/ts/components";
 import { useForm } from "vee-validate";
 import Swal from "sweetalert2/dist/sweetalert2.min.js";
 import * as Yup from "yup";
 import Step1 from "@/components/wizard/steps/Step1.vue";
 import Step2 from "@/components/wizard/steps/Step2.vue";
 import Step3 from "@/components/wizard/steps/Step3.vue";
 import Step4 from "@/components/wizard/steps/Step4.vue";
 import Step5 from "@/components/wizard/steps/Step5.vue";


 interface IStep1 {
 contact_name: string;
 contact_person: string;
 phone_no : string;
 phone_no2 : string;
 address : string;
 cnic : string
 city : string
 ntn_no : string
 url : string
 account_type : string
 reference_type : string
 sale_person : string
 }

 interface IStep2 {
 shipper_contact_person : string;
 shipper_phone_number : string;
 shipper_email : string;
 shipper_city : string;
 shipper_address : string;
 shipper_brand_name : string;
 shipper_cnic : string;
 }

 interface IStep3 {
 businessName: string;
 businessDescriptor: string;
 businessType: string;
 businessDescription: string;
 businessEmail: string;
 }

 interface IStep4 {
 nameOnCard: string;
 cardNumber: string;
 cardExpiryMonth: string;
 cardExpiryYear: string;
 cardCvv: string;
 saveCard: string;
 }

 interface CreateAccount extends IStep1, IStep2, IStep3, IStep4 {}

 export default defineComponent({
 name: "kt-horizontal-wizard",
 components: {
 Step1,
 Step2,
 Step3,
 Step4,
 Step5,
 },
 setup() {
 const _stepperObj = ref(null);
 const horizontalWizardRef = ref(null);
 const currentStepIndex = ref(0);
 const formData = ref({
 contact_name: "Contact Name",
 contact_person: "Contact Person",
 phone_no: "Phone Number",
 phone_no2: "Phone Number 2",
 address: "Address",
 city : "City",
 cnic : "CNIC#",
 ntn_no : "NTN #",
 url : "URL",
 account_type : "Account Type",
 reference_type : "Reference No#",
 sale_person : "Sale Person",

 shipper_contact_person : "Shipper Contact Person",
 shipper_phone_number : "Shipper Phone Number",
 shipper_email : "Shipper Email",
 shipper_city : "Shipper City",
 shipper_address : "Shipper Address",
 shipper_brand_name : "Shipper Brand Name",
 shipper_cnic : "Shipper CNIC",

 businessName: "Keenthemes Inc.",
 businessDescriptor: "KEENTHEMES",
 businessType: "1",
 businessDescription: "",
 businessEmail: "corp@support.com",
 nameOnCard: "Max Doe",
 cardNumber: "4111 1111 1111 1111",
 cardExpiryMonth: "1",
 cardExpiryYear: "2",
 cardCvv: "123",
 saveCard: "1",
 });

 onMounted(() => {
 _stepperObj.value = StepperComponent.createInsance(
 horizontalWizardRef.value as HTMLElement
 );
 });

 const createAccountSchema = [
 Yup.object({
 contact_name: Yup.string().required(),
 contact_person: Yup.string().required(),
 phone_no: Yup.string().required(),
 phone_no2: Yup.string().required(),
 address: Yup.string().required(),
 city: Yup.string().required(),
 cnic: Yup.string().required().min(15),
 ntn_no : Yup.string().required(),
 url : Yup.string().required(),
 account_type : Yup.string().required(),
 reference_type : Yup.string().required(),
 sale_person : Yup.string().required(),

 }),
 Yup.object({
 shipper_contact_person : Yup.string().required(),
 shipper_phone_number : Yup.string().required(),
 shipper_email : Yup.string().required(),
 shipper_city : Yup.string(),
 shipper_address : Yup.string(),
 shipper_brand_name : Yup.string() ,
 shipper_cnic : Yup.string(),
 }),
 Yup.object({
 businessName: Yup.string().required().label("Business Name"),
 businessDescriptor: Yup.string()
 .required()
 .label("Shortened Descriptor"),
 businessType: Yup.string().required().label("Corporation Type"),
 businessEmail: Yup.string().required().label("Contact Email"),
 }),
 Yup.object({
 nameOnCard: Yup.string().required().label("Name On Card"),
 cardNumber: Yup.string().required().label("Card Number"),
 cardExpiryMonth: Yup.string().required().label("Expiration Month"),
 cardExpiryYear: Yup.string().required().label("Expiration Year"),
 cardCvv: Yup.string().required().label("CVV"),
 }),
 ];

 const currentSchema = computed(() => {
 return createAccountSchema[currentStepIndex.value];
 });

 const { resetForm, handleSubmit } = useForm<
 IStep1 | IStep2 | IStep3 | IStep4
 >({
 validationSchema: currentSchema,
 });

 const totalSteps = computed(() => {
 if (!_stepperObj.value) {
 return;
 }

 return _stepperObj.value.totatStepsNumber;
 });

 const handleStep = handleSubmit((values) => {
 // resetForm({
 // values: {
 // ...formData.value,
 // },
 // });

 console.log(formData.value);
 for (const item in values) {
 // eslint-disable-next-line no-prototype-builtins
 if (values.hasOwnProperty(item)) {
 if (values[item]) {
 formData.value[item] = values[item];
 }
 }
 }

 currentStepIndex.value++;

 if (!_stepperObj.value) {
 return;
 }

 _stepperObj.value.goNext();
 });

 const previousStep = () => {
 if (!_stepperObj.value) {
 return;
 }

 currentStepIndex.value--;

 _stepperObj.value.goPrev();
 };

 const formSubmit = () => {
 Swal.fire({
 text: "All is cool! Now you submit this form",
 icon: "success",
 buttonsStyling: false,
 confirmButtonText: "Ok, got it!",
 customClass: {
 confirmButton: "btn fw-semobold btn-light-primary",
 },
 }).then(() => {
 window.location.reload();
 });
 };

 return {
 horizontalWizardRef,
 previousStep,
 handleStep,
 formSubmit,
 totalSteps,
 currentStepIndex,
 };
 },
 });

Syed · Answer

I have attached (step 2) and the (horizontal) vue page, is there way to validate all the dynamic fields inside the step2,  I feel like Yup Object is ignoring dynamic fields

Dynamic Validation Vue Vee Validate

Replies (4)

Sign Up

Profile Information

Shipping Information

Banking Information

Documents & Legal

Login Information

Metronic

ReUI

Products

Legal

Stay Connected