Merge branch 'master' of github.com:wearebraid/vue-formulate

README.md

@@ -11,7 +11,7 @@ mechanism for building and validating forms with a centralized data store.
 
 ### Show and tell
 
-You'll find an easy to use example, in [the example directory](https://github.com/wearebraid/vue-formulate/tree/master/example) 
+You'll find an easy to use example, in [the example directory](https://github.com/wearebraid/vue-formulate/tree/master/example)
 as well as a live demo available at: [demo.vueformulate.com](https://demo.vueformulate.com).
 
 ### Get Started
@@ -159,8 +159,9 @@ Rule      |  Arguments
 required  | *none*
 email     | *none*
 confirmed | confirmation field
+number    | *none*
 
-You can add as many validation rules as you want to each `formulate-element`, 
+You can add as many validation rules as you want to each `formulate-element`,
 simply chain your rules with pipes `|'. Additional arguments can be passed to
 validation rules by using parenthesis after the rule name:
 
@@ -194,7 +195,7 @@ attribute on the `formulate-element`.
 />
 ```
 
-Validation rules should return an error message string if they failed, or 
+Validation rules should return an error message string if they failed, or
 `false` if the input data is valid.
 
 Adding your own validation rules is easy. Just pass an additional object

src/components/FormulateElement.vue

@@ -192,6 +192,10 @@ export default {
       type: [String, Number, Boolean],
       default: () => false
     },
+    pattern: {
+      type: [String, Number, Boolean],
+      default: () => false
+    },
     minlength: {
       type: [String, Number, Boolean],
       default: () => false
@@ -333,7 +337,7 @@ export default {
       return show
     },
     attributes () {
-      return ['min', 'max', 'minlength', 'maxlength', 'placeholder', 'id', 'multiple']
+      return ['min', 'max', 'minlength', 'maxlength', 'placeholder', 'id', 'multiple', 'pattern']
         .filter(prop => this[prop] !== false)
         .reduce((attributes, attr) => {
           attributes[attr] = this[attr]

src/errors.js

@@ -2,5 +2,6 @@ export default {
   required: ({label, value}) => `${label} is required`,
   email: ({label, value}) => `${label} is invalid.`,
   confirmed: ({label, value}) => `${label} does not match the confirmation field.`,
+  number: ({label, value}) => `${label} is not a number`,
   default: ({label, value}) => `This field is invalid.`
 }

src/rules.js

@@ -8,6 +8,15 @@ export default {
     return (!value || (Array.isArray(value) && !value.length)) ? error(...arguments) : false
   },
 
+  /**
+   *  Validates the field contains only numbers
+   * @param {Object} field
+   * @param {string} label
+   */
+  async number ({value, error}) {
+    return isNaN(value) ? error(...arguments) : false
+  },
+
   /**
    * Validate email addresses
    * @param {Object} field

tests/rules.test.js

@@ -12,6 +12,22 @@ test('test required rule failure', async t => {
   t.is('namexyz', v)
 })
 
+test('test number no failure on empty', async t => {
+  let v = await rules.number({field: 'name', value: '', error, label: 'xyz'})
+  t.is(false, v)
+})
+
+test('test number failure not number', async t => {
+  let v = await rules.number({field: 'name', value: 't', error, label: 'xyz'})
+  t.is('string', typeof v)
+  t.is('namexyz', v)
+})
+
+test('test number is typeof number', async t => {
+  let v = await rules.number({field: 'name', value: '3', error, label: 'xyz'})
+  t.is(false, v)
+})
+
 test('test required rule empty array failure', async t => {
   let v = await rules.required({field: 'name', value: [], error, label: 'xyz'})
   t.is('namexyz', v)