feat: allow VeeValidate simple validation rules

src/components/Fields/Control.vue

@@ -87,7 +87,7 @@ export default {
           max_value: isInputNumber ? max || defaultMax : false
         })
 
-      return validation
+      return { ...validation, ...this.item.validation }
     }
   },
   props: {

src/components/Form/Form.spec.js

@@ -29,6 +29,7 @@ const RADIO_VALUE = 'Radio-One'
 const NUMBER_VALUE = '18'
 const ZIP_VALUE = '12345'
 const PASSWORD_VALUE = ZIP_VALUE
+const BIG_VALUE = ZIP_VALUE
 
 const getInitialValue = (label, node, attribute) =>
   fields
@@ -43,6 +44,7 @@ const allFields = flatten(fields)
   .filter(field => !['html', 'slot'].includes(Object.keys(field)[0]))
 const allNormalInputLabel = allFields
   .filter(x => !x.type || x.type === 'tel')
+  .filter(x => !x.validation)
   .map(x => x.label)
 
 const fieldWithPattern = allFields.find(({ pattern }) => pattern)
@@ -76,6 +78,8 @@ describe('Form', () => {
     b.type(NUMBER_VALUE, 'input[name=age]')
     b.type(ZIP_VALUE, 'input[name=zip]')
     b.type(DEFAULT_VALUE, 'textarea[name=message]')
+    b.type(DEFAULT_VALUE, 'input[name=small]')
+    b.type(BIG_VALUE, 'input[name=big]')
   }
 
   const getFormValues = () => {
@@ -92,7 +96,9 @@ describe('Form', () => {
       Email: EMAIL_VALUE,
       Radio: RADIO_VALUE,
       Age: NUMBER_VALUE,
-      Zip: ZIP_VALUE
+      Zip: ZIP_VALUE,
+      big: BIG_VALUE,
+      small: DEFAULT_VALUE
     }
   }
 

src/components/Form/FormRules.spec.js

@@ -0,0 +1,65 @@
+import Helpers from 'mwangaben-vthelpers'
+import VeeValidate from 'vee-validate'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Form from '@/components/Form'
+
+const v = new VeeValidate.Validator()
+const localVue = createLocalVue()
+localVue.use(VeeValidate)
+
+let wrapper, b
+
+const FORM_NAME = 'testFormName'
+const WORD_IN_IS_NOT_RULE = 'small'
+
+const $inputSmall = 'input#small'
+const $isDanger = '.is-danger'
+const $helpIsDanger = `.help${$isDanger}`
+
+describe('Form with html content inside json', () => {
+  beforeEach(() => {
+    wrapper = mount(Form, {
+      localVue,
+      provide: () => ({
+        $validator: v
+      }),
+      propsData: {
+        formFields: [{
+          label: 'small',
+          validation: { is_not: WORD_IN_IS_NOT_RULE, numeric: true }
+        }],
+        formName: FORM_NAME
+      }
+    })
+    b = new Helpers(wrapper)
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('apply custom rules in order', async () => {
+    b.domHasNot($isDanger)
+
+    b.type(WORD_IN_IS_NOT_RULE, $inputSmall)
+    await wrapper.vm.$nextTick()
+
+    b.domHas($isDanger)
+    b.see(`The ${WORD_IN_IS_NOT_RULE} value is not valid.`, $helpIsDanger)
+
+    b.type('not-small', $inputSmall)
+    await wrapper.vm.$nextTick()
+
+    b.see('The small field may only contain numeric characters.', $helpIsDanger)
+
+    b.type(0, $inputSmall)
+    await wrapper.vm.$nextTick()
+
+    b.domHasNot($isDanger)
+
+    expect(wrapper.vm.isFormValid).toBeTruthy()
+
+    const $inputSubmit = b.find('input[type=submit]')
+    expect($inputSubmit.attributes().disabled).toBe(undefined)
+  })
+})

src/components/Form/fields.json

@@ -76,7 +76,7 @@
     }
   ],
   {
-    "html": "<p class='label'>Custom attr<sup class='has-text-grey-light is-size-7'> *</sup></p>",
+    "html": "<p class='label'>Custom attr & validation<sup class='has-text-grey-light is-size-7'> *</sup></p>",
     "attr": {
       "class": "labelDefaultMb has-text-centered",
       "data-test": "dataTestFromJson"
@@ -85,19 +85,24 @@
   [
     {
       "label": "small",
-      "placeholder": "small",
+      "placeholder": "no string small",
       "showLabel": false,
-      "isRequired": false,
+      "value": "small",
+      "validation": {
+        "is_not": "small"
+      },
       "attr": {
         "data-attr": "testingAttrFromJson",
         "class": "is-rounded"
       }
     },
     {
       "label": "big",
-      "placeholder": "big",
+      "placeholder": "must be a numeric value",
       "showLabel": false,
-      "isRequired": false,
+      "validation": {
+        "numeric": true
+      },
       "field": {
         "attr": {
           "data-attr": "dataAttrOnField"