vue2-form-validate
Form validation for Vue.js 2.2+
Install
Available through npm as vue2-form-validate
.
;// or var KenryForm = require('kenry-form') or window.KenryForm if you are linking directly to the dist file// install globallyVue;Vue;### UsageOnce installed you have access to four for managing form state validating form fields and displaying validation messagesExample```html<div id="app"><kform :state="formstate" @submit.prevent="onSubmit"><span>Name *</span><input v-model="model.name" required minlength="3" name="name" /><button type="submit">Submit</button></kform><pre>{{ formstate }}</pre></div>
Vue; el: '#app' data: //formstate:{} formstate: messages: required: 'This field is required' isFieldColor: false // default = true, set false is not set border color for the input field. model: name: '' email: 'invalid-email' methods: { ifthisformstate$invalid // alert user and exit early return; // otherwise submit form } ;
The output of formstate
will be:
"$dirty": false "$pristine": true "$valid": false "$invalid": true "$submitted": false "$touched": false "$untouched": true "$focused": false "$pending": false "$error": // fields with errors are copied into this object "$submittedState": // each form sumbit, state is cloned into this object "name": "$name": "name" "$dirty": false "$pristine": true "$valid": false "$invalid": true "$touched": false "$untouched": true "$focused": false "$pending": false "$error": "required": true "email": "$name": "email" "$dirty": false "$pristine": true "$valid": false "$invalid": true "$touched": false "$untouched": true "$focused": false "$pending": false "$error": "email": true
kenry-form
state
Object on which form state is settag
String, defaults toform
show-messages
String, applies to all childfield-messages
, show errors dependant on form field state e.g.$touched
,$dirty || $touched
, '$touched || $submitted'
validate
state
Optional way of passing in the form state. If omitted form state will be found in the $parentcustom
Object containing one or many custom validators.{validatorName: validatorFunction}
tag
String which specifies what element tag should be rendered by thevalidate
component, defaults tospan
field-messages
state
Optional way of passing in the form state. If omitted form state will be found in the $parentname
String which specifies the related field nametag
String, defaults todiv
show
String, show error dependant on form field state e.g.$touched
,$dirty || $touched
, '$touched || $submitted'auto-label
Boolean, defaults to false. Automatically set thefor
attribute of labels found inside thefield-messages
component
field
tag
String, defaults todiv
auto-label
Boolean, defaults to true. Automatically setfor
andid
attributes of label and input elements found inside thevalidate
component
Config
Set config options when using Vue.use(KenryForm, options)
, or when using a mixin mixins: [new KenryForm(options)]
defaults:
let options = kMessages: required: 'system is required' validators: // custom validator functions: { return value === value; } messages: // custom message 'upper-character': 'This field must be capital letter' isFieldColor: true isAllowMessage: true; validators: {} formComponent: 'kenryForm' formTag: 'form' fieldComponent: 'field' isFieldColor:true isAllowMessage:true Promise: typeof Promise === 'function' ? Promise : null