when i try to submit paymentMode as online banking and not selecting bank then it shows validation error mentioning bank is required
then i enter a bank and submit
and (without refreshing the page) again if i submit online banking without selecting bank then validation is not working, data can be submitted
Transaction Information Form
<!-- Bank Name Dropdown Column -->
<Column header="Bank Name">
<template #body="{ data }">
<Field name="bank" v-slot="{ field }" :rules="requiredIfOnlineBanking(data.paymentMode)">
<Select
v-model="data.bank"
v-bind="field"
:options="banks"
optionLabel="label"
optionValue="value"
placeholder="Select Bank"
class="w-full"
:disabled="data.paymentMode !== 'Online Banking'"
/>
<ErrorMessage name="bank" class="error" />
</Field>
</template>
</Column>
</DataTable>
<Button type="submit" class="submit-button">
Submit
</Button>
<script setup>
import { ref } from 'vue';
import { ErrorMessage, Field, Form } from 'vee-validate';
import Select from 'primevue/select';
import Button from 'primevue/button';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import { defineRule } from 'vee-validate';
import { required } from '@vee-validate/rules';
defineRule('required', required);
defineRule('required_if', (value, [compareField, compareValue], ctx) => {
if (ctx.form[compareField] === compareValue) {
return !!value || 'This field is required when payment mode is Online Banking.';
}
return true;
});
// Function to determine required rule for bank field
const requiredIfOnlineBanking = (paymentMode) => {
return paymentMode === 'Online Banking' ? 'required' : '';
};
// Transaction data
const transactions = ref([{ id: 1, paymentMode: '', bank: '' }]);
// Select options for payment modes and banks
const paymentModes = ref([
{ label: 'Cash', value: 'Cash' },
{ label: 'Online Banking', value: 'Online Banking' },
]);
const banks = ref([
{ label: 'Nabil', value: 'Nabil' },
{ label: 'NMB', value: 'NMB' },
{ label: 'NIC ASIA', value: 'NIC ASIA' },
]);
// Function to reset bank field when payment mode changes
const resetBankField = (data) => {
if (data.paymentMode !== 'Online Banking') {
data.bank = ''; // Clear the bank field
}
};
// Form submission handler
const handleSubmit = () => {
alert('Form submitted successfully!');
console.log('Submitted Data:', JSON.stringify(transactions.value, null, 2));
};
</script>
when i try to submit paymentMode as online banking and not selecting bank then it shows validation error mentioning bank is required
then i enter a bank and submit
and (without refreshing the page) again if i submit online banking without selecting bank then validation is not working, data can be submitted
Transaction Information Form