diff --git a/src/FormulateInput.vue b/src/FormulateInput.vue index 954be10..e328d82 100644 --- a/src/FormulateInput.vue +++ b/src/FormulateInput.vue @@ -183,7 +183,7 @@ export default { type: String, default: 'blur', validator: function (value) { - return ['blur', 'live'].includes(value) + return ['blur', 'live', 'submit'].includes(value) } }, showErrors: { diff --git a/test/unit/FormulateInput.test.js b/test/unit/FormulateInput.test.js index 7a34f7a..210faee 100644 --- a/test/unit/FormulateInput.test.js +++ b/test/unit/FormulateInput.test.js @@ -2,6 +2,7 @@ import Vue from 'vue' import flushPromises from 'flush-promises' import { mount, createLocalVue } from '@vue/test-utils' import Formulate from '@/Formulate.js' +import FormulateForm from '@/FormulateForm.vue' import FormulateInput from '@/FormulateInput.vue' import FormulateInputBox from '@/inputs/FormulateInputBox.vue' @@ -292,4 +293,27 @@ describe('FormulateInput', () => { await flushPromises(); expect(wrapper.vm.context.visibleValidationErrors.length).toBe(2); }) + + it('doesnt show errors on blur when set error-behavior is submit', async () => { + const wrapper = mount(FormulateInput, { propsData: { + type: 'special', + validation: 'required', + errorBehavior: 'submit', + } }) + wrapper.find('input').trigger('input') + wrapper.find('input').trigger('blur') + await flushPromises() + expect(wrapper.find('.formulate-input-errors').exists()).toBe(false) + }) + + it('displays errors when error-behavior is submit and form is submitted', async () => { + const wrapper = mount(FormulateForm, { + slots: { + default: `` + } + }) + wrapper.trigger('submit') + await flushPromises() + expect(wrapper.find('.formulate-input-errors').exists()).toBe(true) + }) })