1.0.3 • Published 6 years ago
k-form v1.0.3
kenry-form
Form validation for Vue.js 2.2+
Install
Available through npm as kenry-form
.
import KenryForm from 'kenry-form';
// or var KenryForm = require('kenry-form') or window.KenryForm if you are linking directly to the dist file
// install globally
Vue.use(KenryForm);
Vue.use(KenryForm, options);
### Usage
Once installed you have access to four components (`kenry-form`, `validate`) for managing form state, validating form fields and displaying validation messages.
Example
```html
<div id="app">
<kform :state="formstate" @submit.prevent="onSubmit">
<span>Name *</span>
<input v-model="model.name" required name="name" />
<button type="submit">Submit</button>
</kform>
<pre>{{ formstate }}</pre>
</div>
Vue.use(KenryForm);
new Vue({
el: '#app',
data: {
formstate: {},
model: {
name: '',
email: 'invalid-email'
}
},
methods: {
onSubmit: function () {
if(this.formstate.$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: {
functions: {
}, isFieldColor: true, isAllowMessage: true'upper-character': function(value, attrValue, vnode) { return value === value.toLocaleUpperCase(); } }, messages: { 'upper-character': 'This field must be capital letter' }
- };
{
validators: {},
formComponent: 'kenryForm',
formTag: 'form',
fieldComponent: 'field',
isFieldColor:true,
isAllowMessage:true,
Promise: typeof Promise === 'function' ? Promise : null
}