vuejs-validators

Installation

NPM

Yarn

VueForm.js Recommended

• vuejs-validators.js can stand independently

• vuejs-form.js is a zero non-dev dependency package

• This vuejs-validators.js package was built to support vuejs-form.js

VueForm Playground Examples (Implementing Vuejs-validators.js)

• Vue Example One (Live Example)

• Vue Example Two (Live Example)

Vue Example One

Show First Error For Each Field And

Only Validate Form (AKA find errors) when Form Data is submitted

<div>        

<input type='text' v-model='form.name' />

<span v-if="form.errors().has('name')" v-text="form.errors().get('email')"></span>

<input type='email' v-model='form.email' />

<span v-if="form.errors().has('email')" v-text="form.errors().get('email')"></span>

<input type='password' v-model='form.password' />

<span v-if="form.errors().has('password')" v-text="form.errors().get('password')"></span>

<input type='password' v-model='form.password_confirmation' />

<span v-if="form.errors().has('password_confirmation')" v-text="form.errors().get('password_confirmation')"></span>

<hr>

<button :disabled='form.empty()' @click='submit'>

Complete

</button>

</div>

data: () => ({

form: form({

email: '',

password: '',

password_confirmation: ''

})

.rules({

email: 'email|min:5|required',

password: 'required|min:5|confirmed'

})

.messages({

'email.email': 'Email field must be an email (durr)',

'password.confirmed': 'Whoops, :attribute value does not match :confirmed value',

}),

}),

methods: {

submit() {

if (this.form.validate().errors().any()) return;

console.log('submit: ', this.form.only('email', 'password'));

console.log('submit: ', this.form.except('password_confirmation'));

},

}

Vue Example Two

Show all form errors for all form fields

Re-validate Form Any time user updates form data for any field

<div>

<div v-if="form.errors().any()" v-for="(message, key) in form.errors().list()" :key="`${key}.error`">

{{ message }}

</div>

<input type='email' v-model='form.email' /> <br>

<input type='password' v-model='form.password' /> <br>

<input type='password' v-model='form.password_confirmation' /> <br>

<hr>

<button :disabled='form.empty()' @click='submit'>

Complete

</button>

</div>

data: () => ({

form: form({

email: '',

password: '',

password_confirmation: ''

})

.rules({

email: 'email|min:5|required',

password: 'required|min:5|confirmed'

})

.messages({

'email.email': ':attribute must be a valid email',

'email.min': ':attribute may not have less than :min characters',

'password.confirmed': 'Whoops, :attribute value does not match :confirmed value',

}),

}),

watch: {

/*--------------------------------------------------------------

| When Should Your Form "Validate", Providing Error Messages?

|--------------------------------------------------------------

| 

|   Form validates every time form data is updated. To

|   display errors on form submit, remove watcher &

|   move "this.form.validate()" over to submit()

|

*/

['form.data']: {

deep: true,

immediate: false,

handler: 'onFormChange'

}

},

methods: {

onFormChange(after, before) {

this.form.validate()

},

submit() {

return this.form.errors().any() ? this.failed() : this.passed();

},

failed() {

console.log('errors: ', this.form.errors().all());

},

passed() {

console.log('data: ', this.form.all());

console.log('wrapped data: ', this.form.wrap('data'));

}

}

VueJS Form & VueJS Validators Together (Recommended for best development experience, but ultimately optional)

• (npm)

• (github)

• Fast Setup

• Zero Dependencies

• Tested Thoroughly

• Simplified Syntax

• Extremely Lightweight

• Simplified Extendability

<div>

<div v-for="(message, key) in errors" :key="`${key}.error`">

{{ message }}

</div>

<input type='text' v-model='form.name' /> <br>

<input type='email' v-model='form.email' /> <br>

<input type='password' v-model='form.password' /> <br>

<input type='password' v-model='form.confirm_password' /> <br>

<hr>

<button :disabled='form.empty()' @click='submit'>

Complete

</button>

</div>

Form Validation Simplified

Table Of Contents

• Install

• Available Rules

• Validator Life Cycle Hooks

• Validator Errors Api

• Extending

• Custom Messages

• Custom Validation Rules

• License

• Contribute

Validator Api

• accepted
• after
• afterorequal
• alpha
• alphadash
• alphanum
• array
• before
• beforeorequal
• between
• boolean
• confirmed
• date
• dateequals
• different
• digits
• digitsbetween
• distinct
• email
• endswith
• greaterthan
• gte
• integer
• ip
• ipv4
• ipv6
• json
• lessthan
• lte
• max
• min
• notregex
• notwithin
• number
• numeric
• phone
• regex
• required
• same
• startswith
• string
• url
• within

Accepted Rule

The field under validation must be yes, on, 1, or true. This is useful for validating "Terms of Service" acceptance.

Passing Accepted Rule

import validator from 'vuejs-validators';

let form = { terms_of_service: 'no' }

let rules = { terms_of_service: 'accepted' }

validator(form, rules).validate();

Failing Accepted Rule

import validator from 'vuejs-validators';

let form = { terms_of_service: null }

let rules = { terms_of_service: 'accepted' }

validator(form, rules).validate();

After Rule

Passes After (Date) Rule

let form = { 

    one: '4-22-1997', 

    two: '2-2-1997' 

}

let rules = {

  one: 'after:4-23-1997',

  two: 'after:2-3-1996',

}

Fails After (Date) Rule

let form = { 

    one: '4-22-1997', 

    two: '2-12-1997' 

}

let rules = {

  one: 'after:4-22-1998',

  two: 'after:1-11-1996',

}

### After Or Equal Rule

(Date)

The field under validation must be after or equal to the compared date.

> Passes After Or Equal (Date) Rule

```js

let form = { 

    one: '4-22-1997',

    two: '1-11-2013', 

}

let rules = {

  one: 'after_or_equal:4-22-1997',

  two: 'after_or_equal:2-12-2014',

}

Fails After Or Equal (Date) Rule

let form = { 

    one: '4-22-1997',

    two: '2-12-1997' 

}

let rules = {

  one: 'after_or_equal:4-23-1997',

  two: 'after_or_equal:2-3-1996',

}

### Alpha Rule

> The field under validation must be entirely alphabetic characters.

> `Passing Alpha Rule`

```js

import validator from 'vuejs-validators';

let form = { letters: 'asdeddadfjkkdjfasdf' };

let rules = { letters: ['alpha'] };

validator(form, rules).validate();

Failing Alpha Rule

import validator from 'vuejs-validators';

let form = { letters: '5-@'}

let rules = { letters: ['alpha'] }

validator(form, rules).validate();

Alpha Dash Rule

The field under validation may have alpha-numeric characters, as well as dashes and underscores.

Passing Alpha Dash Rule

import validator from 'vuejs-validators';

let form = { slug: 'user_name' };

let rules = { slug: ['alpha_dash'] };

validator(form, rules).validate();

Failing Alpha Dash Rule

import validator from 'vuejs-validators';

let form = { words: 'hello world'}

let rules = { words: ['alpha_dash'] }

validator(form, rules).validate();

Alpha Num Rule

The field under validation must be entirely alpha-numeric characters.

Passing Alpha Num Rule

import validator from 'vuejs-validators';

let form = { key: '4asdasdfe4d23545w634adf' };

let rules = { key: ['alpha_num'] };

validator(form, rules).validate();

Failing Alpha Num Rule

import validator from 'vuejs-validators';

let form = { identifier: '1-asdf4adf_d_42'}

let rules = { identifier: ['alpha_num'] }

validator(form, rules).validate();

Array Rule

The field under validation must be a JS array.

Passing Array Rule

import validator from 'vuejs-validators';

let form = { list: ['banana', 'broccoli', 'carrot'] };

let rules = { list: 'array' };

validator(form, rules).validate();

Failing Array Rule

import validator from 'vuejs-validators';

let form = { options: { name: 'hey world' } }

let rules = { options: 'array' }

validator(form, rules).validate();

Before Rule

Passes Before (Date) Rule

let form = { 

    one: '4-22-1997', 

    two: '2-12-1997' 

}

let rules = {

  one: 'before:4-22-1998',

  two: 'before:2-12-1997',

}

Fails Before (Date) Rule

let form = { 

    one: '4-22-1997', 

    two: '3-12-1997' 

}

let rules = {

  one: 'before:4-22-1997',

  two: 'before:2-3-1996',

}

### Before Or Equal Rule

(Date)

The field under validation must be before or equal to the compared date.

> Passes Before Or Equal (Date) Rule

one: '4-22-1997', 

two: '2-12-1997' 

Fails Before Or Equal (Date) Rule

let form = { 

    one: '4-22-1997', 

    two: '2-3-1997' 

}

let rules = {

  one: 'before_or_equal:4-23-1997',

  two: 'before_or_equal:2-3-1996',

}

### Email Rule

> The given field value must be an email

> `Passing Email Rule`

```js

import validator from 'vuejs-validators';

let form = { email: 'example@cleancode.studio' };

let rules = { email: ['email'] };

validator(form, rules).validate();

Failing Email Rule

import validator from 'vuejs-validators';

let form = { email: 'asdfsdaf@.net'}

let rules = { email: ['email'] }

validator(form, rules).validate();

Boolean Rule

Boolish validation, not strict boolean check

Validates that field value is "truthy" or "falsy"

Falsy Values

let falsy = [

    0, '0',

    'no', 'No', 'NO',

    'off', 'Off', 'OFF',

    false, 'false', 'False', 'FALSE',

];

Truthy values

let truthy = [

    1, '1',

    'on', 'On', 'ON',

    'yes', 'Yes', 'YES',

    true, 'true', 'True', 'TRUE',

];

Passing Boolean Rule

import validator from 'vuejs-validators';

let form = { selected: 'Yes' };

let rules = { selected: ['boolean'] };

validator(form, rules).validate();

Failing Boolean Rule

import validator from 'vuejs-validators';

form = { selected: null };

rules = { selected: ['boolean'] };

validator(form, rules).validate();

Confirmed Validation Rule

The field under validation must have a matching field of fooconfirmation. For example, if the field under validation is password, a matching passwordconfirmation field must be present in the input.

Passing Confirmed Rule

let form = { 

    one: '4-22-1997',

    two: 'April 22 2025' 

}

let rules = {

  one: 'date_equals:4-22-1997',

  two: 'date_equals:April 22 2025',

}

let form = { 

    one: '4-22-1997',

    two: '2-12-1997' 

}

let rules = {

  one: 'date_equals:4-24-1998',

  two: 'date_equals:1-11-1996',

}

### Different Validation Rule

> The given field value is different than another field value

> `Passing Different Rule`

```js bash

import validator from 'vuejs-validators';

let form = { password: 'asdfasdfasdf', confirm_password: 'secret' };

let rules = { password: 'different:confirm_password' };

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { amount: '10000' }

let rules = { amount: 'digits:6' }

validator(form, rules).validate();

import validator from 'vuejs-validator'

let form = { amount: '10000' }

let rules = { amount: 'digits:4' }

validator(form, rules).validate();

### Digits Between Rule

> The field under validation must be numeric and have a length between the lower and upper limit defined.

> `Passing Digits Between Rule`

```js

import validator from 'vuejs-validators';

let form = { amount: '10000' }

let rules = { amount: 'digits_between:4,6' }

validator(form, rules).validate();

import validator from 'vuejs-validator'

let form = { amount: '10000' }

let rules = { amount: 'digits_between:3,5' }

validator(form, rules).validate();

### Distinct Rule

> The field under validation must be an array with no duplicate values.

> `Passing Distinct Rule`

```js

import validator from 'vuejs-validators';

let form = { shopping_list: ['ham', 'eggs', 'milk', 'turkey'] }

let rules = { shopping_list: 'distinct' }

validator(form, rules).validate();

import validator from 'vuejs-validator'

let form = { shopping_list: ['ham', 'ham', 'eggs', 'milk', 'turkey'] }

let rules = { shopping_list: 'distinct' }

validator(form, rules).validate();

### Email Rule

> The given field value must be an email

> `Passing Email Rule`

```js

import validator from 'vuejs-validators';

let form = { email: 'example@cleancode.studio' };

let rules = { email: ['email'] };

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { email: 'asdfsdaf@.net'}

let rules = { email: ['email'] }

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { name: 'sammie' };

let rules = { name: 'ends_with:sl,ie,asx' };

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { name: 5 };

let rules = { name: 'ends_with:sl,ie,asx' };

validator(form, rules).validate();

let form = { name: 'azure' };

let rules = { name: 'ends_with:sl,ie,asx' };

validator(form, rules).validate();

age: 24,

members: 19,

percentage: 0.4,

age: 'greater_than:13',

members: 'greater_than:10',

percentage: 'greater_than:0.35',

let form = {

    age: 24,

    members: 19,

    percentage: 0.4,

};



let rules = {

    age: 'greater_than:24',

    members: 'greater_than:100',

    percentage: 'greater_than:0.9',

};

### Gte Rule

(Greater Than Or Equal - Numeric)

Number must be greater than or equal to compared value

> Passing greater than or equal rule (gte)

```js

let form = {

   age: 24,

   members: 19,

   percentage: 0.4,

};

let rules = {

   age: 'gte:24',

   members: 'gte:10',

   percentage: 'gte:0.35',

};

let form = {

    age: 24,

    members: 19,

    percentage: 0.4,

};



let rules = {

    age: 'greater_than:25',

    members: 'greater_than:100',

    percentage: 'greater_than:0.9',

};

### Integer Rule

> This validation rule does not verify that the input is of the "integer" variable type, only that the input is a string or numeric value that contains an integer.

> `Passing Integer Rule`

```js

import validator from 'vuejs-validators';

let form = { students: 25 }

let rules = { students: ['integer'] }

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { students: 'yes' }

let rules = { students: ['integer'] }

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { content: JSON.stringify({ inspire: 'love' }) };

let rules = { content: 'json' };

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { content: 'fasdf' }

let rules = { content: 'json' }

validator(form, rules).validate();

### Less Than Rule

(Numeric)

Number must be less than compared value

> Passing less than rule

```js

let form = {

    age: 24,

    members: 19,

    percentage: 0.4,

} ;

let rules = {

    age: 'less_than:25',

    members: 'less_than:20',

    percentage: 'less_than:0.8',

}

let form = {

    age: 24,

    members: 19,

    percentage: 0.4,

};



let rules = {

    age: 'less_than:24',

    members: 'less_than:10',

    percentage: 'less_than:0.1',

}

### Lte Rule

(Less than or equal - Numeric)

Number must be less than or equal to compared value

> Passing Less than or equal (lte) rule

```js

let form = {

   age: 24,

   members: 19,

   percentage: 0.4,

} ;

let rules = {

   age: 'lte:24',

   members: 'lte:20',

   percentage: 'lte:0.8',

}

let form = {

    age: 24,

    members: 19,

    percentage: 0.4,

};



let rules = {

    age: 'less_than:24',

    members: 'less_than:10',

    percentage: 'less_than:0.5',

}

### Max Rule

> The given field must not be more than the defined maximum limit

> `Passing Max Limit Rule`

```js

import validator from 'vuejs-validators';

let form = { password: 'secret' }

let rules = { password: 'max:10' }

validator(form, rules).validate();

import validator from 'vuejs-validator'

let form = { password: 'secret'}

let rules = { password: 'max:4' }

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { password: 'secret' }

let rules = { password: 'min:6' }

validator(form, rules).validate();

import validator from 'vuejs-validator'

let form = { password: 'secret'}

let rules = { password: 'min:8' }

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { email: 'ex.-fn' };

let rules = { email: ['regex:/^.+@.+$/i'] };

validator(form, rules).validate();

import validator from 'vuejs-validators';

let form = { email: 'example@gmail.com'}

let rules = { email: ['regex:/^.+@.+$/i'] }

validator(form, rules).validate();

Failing Not Within Rule

import validator from 'vuejs-validators';

let form = { pencil: '2a'};

let rules = { pencil: 'not_within:notebook,pencil,2a,marker,sharpie,whiteboard' };

validator(form, rules).validate();

Number Rule

The given field must be a Number (Strict Typed Check). See Numeric For Looser Type Checking

Passing Number Rule

import validator from 'vuejs-validators';

let form = { id: 15 };

let rules = { id: ['number'] };

validator(form, rules).validate();

Failing Number Rule

import validator from 'vuejs-validators';

let form = { id: '15'}

let rules = { id: ['number'] }

validator(form, rules).validate();

Numeric Rule

Determine if a value is numeric, or is a string that can properly represent a numeric

• Numerical value, not strict number check

• Automatically attempts to cast value to numerical value.

• Validates that field value an integer, decimal, or bigInt.

Passing Numeric Rule

import validator from 'vuejs-validators';

let form = { members: '25' }

let rules = { member: ['numeric'] }

validator(form, rules).validate();

Failing Numeric Rule

import validator from 'vuejs-validators';

let form = { members: 'yes' }

let rules = { member: ['numeric'] }

validator(form, rules).validate();

Phone Rule

The given field value must be a phone number

Passing Phone Rule

import validator from 'vuejs-validators';

let form = { send_sms: ['555-555-5555'] }

let rules = { send_sms: ['phone'] }

validator(form, rules).validate();

Failing Phone Rule

import validator from 'vuejs-validators';

let form = { send_sms: '+(3) - 4 32'}

let rules = { send_sms: ['phone'] }

validator(form, rules).validate();

Phone Number Formats Within Testing Coverage

• +61 1 2345 6789

• +61 01 2345 6789

• 01 2345 6789

• 01-2345-6789

• (01) 2345 6789

• (01) 2345-6789

• 5555555555

• (555) 555 5555

• 555 555 5555

• +15555555555

• 555-555-5555

(Any contributions welcome for improving regex validation patterns for current rules as well as adding new rules)

Regex Rule

The given field value must match the regular expression pattern

Passing Regex Rule

import validator from 'vuejs-validators';

let form = { email: 'example@gmail.com' };

let rules = { email: ['regex:/^.+@.+$/i'] };

validator(form, rules).validate();

Failing Regex Rule

import validator from 'vuejs-validators';

let form = { email: 'ex.-fn'}

let rules = { email: ['regex:/^.+@.+$/i'] }

validator(form, rules).validate();

Required Rule

Validates that a given field exists and its value is set

Passing Required Rule

import validator from 'vuejs-validators';

let form = { name: 'jules' };

let rules = { name: ['required'] };

validator(form, rules).validate();

Failing Required Rule

import validator from 'vuejs-validators';

let form = {};

let rules = { name: ['required'] };

validator(form, rules).validate();

Same Validation Rule

The given field value is the same as another field value

Passing Same Rule

Failing Same Rule

Starts With Rule

The field under validation must start with one of the given values.

Passing Starts With Rule

import validator from 'vuejs-validators';

let form = { name: 'sammie' };

let rules = { name: 'starts_with:joe,sam,tom' };

validator(form, rules).validate();

Failing Starts With Rule

import validator from 'vuejs-validators';

let form = { name: 5 };

let rules = { name: 'starts_with:sl,ie,asx' };

validator(form, rules).validate();

let form = { name: 'azure' };

let rules = { name: 'starts_with:joe, sam, tom' };

validator(form, rules).validate();

String Rule

The given field value must be a String

Passing String Rule

import validator from 'vuejs-validators';

let form = { name: 'sammie' };

let rules = { name: 'string' };

validator(form, rules).validate();

Failing String Rule

import validator from 'vuejs-validators';

let form = { name: 54345  }

let rules = { name: 'string' }

validator(form, rules).validate();

Url Rule

The given field value must be an http(s) url

Passing Url Rule

import validator from 'vuejs-validators';

let form = { link: 'https://cleancode.studio' };

let rules = { link: 'url' };

validator(form, rules).validate();

Failing Url Rule

import validator from 'vuejs-validators';

let form = { link: 'httP/ope_type@.net'}

let rules = { link: 'url' }

validator(form, rules).validate();

Within Rule

The given field must be "within" the comma delimited list of items

Passing Within Rule

Failing Within Rule

import validator from 'vuejs-validators';

let form = { name: 'jake'};

let rules = { name: 'within:patricia,veronica,samuel,jeviah' };

validator(form, rules).validate();

• add
• all
• any
• forceMacro
• forget
• get
• has
• list
• macro
• set

Add

errors().add('company', 'Your company is important to us, add the proper information so others can learn about it to!'); 

# errors.list('company')

[

   'Company field is required',

   'Company field must have no more than 15 characters',

   'Your company is important to us, add the proper information so others can learn about it to!'

]

All

{

    name: ['Name field is required', 'Name field must have at lest 3 characters'],

    email: ['Email field must be an email', 'Email field must have at least 3 characters']

}

Any

errors().any(); 

true: If there are any error messages

false: If there are NOT any error messages

Force Macro

errors().get('name'); 

// Output: 'Name field is required'

errors().forceMacro('get', function (field) {

    return this.list(field).join(', ');

});

errors().get('name'); 

// Output: 'Name field is required, Name field can not be greater than 3 characters, Name field must be a string'

Forget

errors.forget(); // Forget errors messages for all fields

errors.forget('name'); // only forget the error messages for a specific field

Get

errors.get('name');

Has

errors.has('name');

List

errors.list(); // ['Name is a required field']

errors.list('name'); // ['Name is a required field']

errors.list('email'); // ['Email field must be an email', 'Email is a required field']

Macro

errors().macro('count', function () {

    return this.list().length();

});

// errors().count() === errors().list().count();

Set

// Set all fields error messages

errors().set({

    name: ['Name field is off, check it out and try again', 'Name field is in wrong language'],

    formula: ['Formula is not incorrect according to the laws of physics']

});

// Set specific field error messages

errors().set('name', ['Name field is off, check it out and try again', 'Name field is in wrong language']);

Hook into validation life cycle and add custom functionality

Available Life Cycle Hooks

• before

• passed

• failed

• after

All Life Cycle Hooks

• May Register callbacks

• May Register more than one callback

• Forgets Registered callback after it's run

• Registered callbacks accept the validator instance

Before Life Cycle Hook

Before validation rules are checked

Before Life Cycle Hook Example

validation.extend({

uppercase: [

':attribute mst be upper case',

({ value }) => value === value.toUpperCase()

]

})

After Life Cycle Example

After validation rules are checked

After Life Cycle Hook Example

validation.errors.add('custom', 'Add Custom Error Message')

Passed Life Cycle Hook

Runs when validation data passed validation rules

Passed Life Cycle Hook Example

axios.post('/data', data).then(response => {

window.location = '/home';

})

.catch(errors => console.error)

Failed Life Cycle Hook

Runs when validation data failed validation rules

Failed Life Cycle Hook Example

console.log('error messages: ', validation.errors.all())

extend several provided features of this package

• Custom Error Messages

• Custom Validation Rule

• Custom Validation Rules

Extending: Custom Error Messages

Customize rule error messages

• Globally, each rule provides a default error message

• Easily override rule's default error message

• Simply pass 'messages' to our validator

• Only override messages you want to

name: ['min:3', 'max:12', 'string', 'required'],

email: ['email', 'required']

'name.min': 'Whoops! :attribute is less than :min characters',

'name.required': 'Wha oh, doesnt look like there any value for your :attribute field',

'email.email': 'Really? Email is called Email...it has to be an email...',

Extending: Custom Rules

Add Your Own Validation Rules

• Easily add, or override, validation rules

• Add a group of rules at a time

• Add a single rule add a time

Extending: Custom Rules ~ Add Single Rule

validator.extend(name, [message, rule])

':attribute must be uppercase',

({ value, validator, parameters }) => value === value.toUpperCase(),

Extending: Custom Rules ~ Add Multiple Rules

validator.extend({ first: [message, rule], second: [message, rule], etc... })

uppercase: [

':attribute must be uppercase',

({ value }) => value === value.toUpperCase(),

],

not_uppercase: [

':attribute must not be uppercase',

({ value }) => value !== value.toUpperCase()

],

required_without: [

':attribute is only required when form is missing :required_without field',

({ validator, parameters }) => !Object.keys(validator.data).includes(parameters[0])

],

required_with: [

':attribute is required with the :required_with field',

({ validator, parameters }) => Object.keys(validator.data).includes(parameters[0])

],

For more advanced fields (Ex: "Required If", "Same As Fields")

you may need the entire validation "context" object.

To see the entirety of our provided validation context, hook into

a rule validator method, pass through a single; non-deconstructed parameter,

and console.log it (Checkout the example directly below)

Cool Tip Example: Log The Validation Context Object To Your Console

':attribute must be uppercase',

// context

context => {

// console.log it to check it out

console.log({ context });

return context.value === context.value.toUpperCase(),

}

Utilization

name: null,

email: null,

password: null,

phone_number: null,

confirm_password: null,

terms_of_service: 'no',

name: 'required|min:4|string|max:10',

email: 'required|email|min:4|max:12',

password: 'required|same:confirm_password|min:8',

confirm_password: 'required|min:8',

phone_number: 'required|phone',

terms_of_service: 'truthy|required',

'name.required': ':attribute is a required field',

'name.min': ':attribute can not be less than :min characters',

'name.string': ':attribute must be a string',

'name.max': ':attribute may not be more than :max characters',

'email.required': ':attribute is required',

'email.email': ':attribute must be an email address',

'email.min': ':attribute may not be less than :min',

'email.max': ':attribute may not be more than :max',

'password.same': ':attribute must have the same value as :same',

'password.min': ':attribute may not be less than :min',

'password.required': ':attribute is a required field',

'phone_number.required': ':attribute is a required field',

'phone_number.phone': ':attribute must be a valid phone number',

'terms_of_service:truthy': ':attribute must have a truthy value ("on", "On", "yes", "Yes", "1", 1, true, "true")',

'terms_of_service:required': ':attribute is required',

Contribute

License

Change Log

1.1.8

• Issue #27 (Regex Rule) Bug Fix

1.1.7

• date rule

• date equals rule

• before (date) rule

• beforeorequal (date) rule

• after (date) rule

• afterorequal (date) rule

• lessthan (numeric) rule

• greaterthan (numeric) rule

• lte (less than or equal numeric) rule

• gte (greater than or equal numeric) rule

1.1.6

• macro, localMacro, forceMacro, and forceLocalMacro methods added on validators and Error Messages Api

• macro, localMacro, forceMacro, and forceLocalMacro methods testing added with associated docs in vueform-js repo

Release 1.1.5

• Error messages "forceMacro" method (Override core functions)

• Error messages documentation refactored according to updates

• "passing" method, returns a success message bag, but it is not officially documented nor officially supported as of yet.

• MessageBag & MessageBagFactory (Error messages api is an implementation of the message bag prototype) are exported and optional imports

Release 1.1.4

• Changes to adapt package to vuejs-form implementation

Release 1.1.3

• Added ip rule

• Added ipv4 rule

• Added ipv6 rule