Vue Js Form

Posted on  by admin

Playground Examples

Curious, but not 100% on whether this is what you're looking for?Try vuejs-form out for yourself before installing -- here's some live examples ready for you to tinker away at!

Extending Form Api.

Extending Errors Api.

Extend Api

Validator Hooks (Documentation Stored in Vuejs Validators Repository). Extend Validator Api. Optionally Use Arrays Syntax Instead Of Pipes. All rules have global default error messages shown when rule fails validation.


Optionally, you are able to override the global defaults rule messages. Simply use the form(data).rules(set).messages({ '{field}.{rule}': 'custom message for failing rule on field' });.


Get Validator Instance.

Check current form data against associated form rules. IMPORTANT: form MUST call validate() method before retrieving current errors.

COMMON GOTCHA!!!! This wont get the current form errors. The form.validate() method was Never called.

What's the reason?

Retrieving errors before validating form data.

Using Custom Validation

would retrieve our error messages Api instance,but it hasn't been filled with our forms error messages. form.validate() compares form data against form rules, populating our form errors with failing rule messages. Validate THEN resolve the errors (Using forms fluent api).

Fluently call validate() before calling errors() is simple and to the point. At first, this may seem like a tedious extra step.

Many may wonder why we don't simply auto-validate the data?

Reason for form.validate().errors() Instead of simply form.errors() triggering the validation. Reactive frameworks may use errors() and the associated Error Messages Api (@See Form Error Messages Api).

Without providing the option for the end developer to determine when the form validates.

Async requests, only validate once we've resolved some given data.

Immediate display of errors (Not always wanted).

Validating user inputs with vee-validate

Option Open To Immediately show error messages (@See Vue Watcher Example). Some other developers may only want to validate data on form submission.

Many validation rules can be abstracted using the form Api to simply disable the ability to submit a button.


EX: . Then within submit() method simply run if (this.form.validate().errors().any()) return;. That allows the option to set up vuejs-form more like a traditional Form, and avoid many complexities that come along with maintaining the status of our reactive state.

Determine if form has a validator instance attached to it. Set Validator Instance. Optionally import the validator instance itself, and extendits functionality validator().macro(add_method, method).

Experience your Vue apps exactly how a user does

Then use form macros to track the current step form.macro(add_method, method).

vuejs-validators.js Also has validator life cycle hooks documented that are available here, but only documented within vuejs-form.js.

Very helpful for multi-step forms. (Date)The field under validation must be the same date as the rules date. Passes Date Equals Rule. Fails Date Equals Rule. The Field under evaluation must be before the compared date.

Alternative Patterns

Passes Before (Date) Rule. Fails Before (Date) Rule. (Date)The field under validation must be before or equal to the compared date. Passes Before Or Equal (Date) Rule. Fails Before Or Equal (Date) Rule. The Field under evaluation must be after the compared date.

Passes After (Date) Rule.

(Date)The field under validation must be a valid, non-relative date according to the new Date js constructor.

Passes Date Rule. Tuesday April 22 1997. Fails Date Rule. Fails After (Date) Rule. (Date)The field under validation must be after or equal to the compared date. Passes After Or Equal (Date) Rule. Fails After Or Equal (Date) Rule. The field under form must be yes, on, 1, or true.

This is useful for validating "Terms of Service" acceptance.

Passing Accepted Rule. Failing Accepted Rule. The field under form must be entirely alphabetic characters.