Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: dynamic rule forcing validation closes #3485
  • Loading branch information
logaretm committed Sep 11, 2021
1 parent a5d6da1 commit d3f0fc0
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 3 deletions.
4 changes: 2 additions & 2 deletions packages/vee-validate/src/useField.ts
Expand Up @@ -237,7 +237,7 @@ export function useField<TValue = unknown>(
return;
}

return validateWithStateMutation();
meta.validated ? validateWithStateMutation() : validateValidStateOnly();
},
{
deep: true,
Expand Down Expand Up @@ -293,7 +293,7 @@ export function useField<TValue = unknown>(

const shouldValidate = !isEqual(deps, oldDeps);
if (shouldValidate) {
meta.dirty ? validateWithStateMutation() : validateValidStateOnly();
meta.validated ? validateWithStateMutation() : validateValidStateOnly();
}
});

Expand Down
36 changes: 35 additions & 1 deletion packages/vee-validate/tests/Field.spec.ts
Expand Up @@ -2,7 +2,7 @@ import flushPromises from 'flush-promises';
import { defineRule, configure } from '@/vee-validate';
import { mountWithHoc, setValue, dispatchEvent, setChecked } from './helpers';
import * as yup from 'yup';
import { reactive, ref, Ref } from 'vue';
import { computed, reactive, ref, Ref } from 'vue';

jest.useFakeTimers();

Expand Down Expand Up @@ -1062,4 +1062,38 @@ describe('<Field />', () => {
await flushPromises();
expect(input.value).toBe('');
});

// #3485
test('computed rules should not generate errors unless the field was validated before', async () => {
const isRequired = ref(false);
const rules = computed(() => (isRequired.value ? 'required' : ''));
mountWithHoc({
setup() {
return {
rules,
};
},
template: `
<Field name="field" :rules="rules" v-slot="{ errorMessage, field }">
<input v-bind="field" />
<span>{{ errorMessage }}</span>
</Field>
`,
});

await flushPromises();
const input = document.querySelector('input') as HTMLInputElement;
const error = document.querySelector('span') as HTMLInputElement;
isRequired.value = true;
await flushPromises();
expect(error.textContent).toBe('');
isRequired.value = false;
await flushPromises();
expect(error.textContent).toBe('');
setValue(input, '');
await flushPromises();
isRequired.value = true;
await flushPromises();
expect(error.textContent).toBe(REQUIRED_MESSAGE);
});
});

0 comments on commit d3f0fc0

Please sign in to comment.