Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Form validation for Vue.js 2.2+
Available through npm as vue-form
.
import VueForm from 'vue-form';
// or var VueForm = require('vue-form') or window.VueForm if you are linking directly to the dist file
// install globally
Vue.use(VueForm);
Vue.use(VueForm, options);
// or use the mixin
...
mixins: [VueForm]
...
mixins: [new VueForm(options)]
...
Once installed you have access to four components (vue-form
, validate
, field
, field-messages
) for managing form state, validating form fields and displaying validation messages.
Live examples
auto-label
): https://jsfiddle.net/fergal_doyle/bqys2p5y/Example
<div id="app">
<vue-form :state="formstate" @submit.prevent="onSubmit">
<validate tag="label">
<span>Name *</span>
<input v-model="model.name" required name="name" />
<field-messages name="name">
<div>Success!</div>
<div slot="required">Name is a required field</div>
</field-messages>
</validate>
<validate tag="label">
<span>Email</span>
<input v-model="model.email" name="email" type="email" required />
<field-messages name="email">
<div slot="required">Email is a required field</div>
<div slot="email">Email is not valid</div>
</field-messages>
</validate>
<button type="submit">Submit</button>
</vue-form>
<pre>{{ formstate }}</pre>
</div>
Vue.use(VueForm);
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
}
}
}
Display validation errors or success messages with field-messages
.
The show
prop supports simple expressions which specifiy when messages should be displayed based on the current state of the field, e.g: $dirty
, $dirty && $touched
, $dirty || $touched
, $touched || $submitted
<field-messages name="name" show="$dirty && $touched">
<div slot="errorKeyA">Error message A</div>
<div slot="errorKeyB">Error message B</div>
</field-messages>
Or use scoped templates:
<field-messages name="fieldName">
<span>Success</span>
<template slot="required" scope="state">
<span v-if="state.$touched || state.$submitted">Name is a required field</span>
</template>
<template slot="errorKeyB" scope="state">
<span v-if="state.$touched || state.$dirty">Error message B</span>
</template>
</field-messages>
type="email"
type="url"
type="number"
required
minlength
maxlength
pattern
min (for type="number")
max (for type="number")
You can use static validation attributes or bindings. If it is a binding, the input will be re-validated every binding update meaning you can have inputs which are conditionally required etc.
<!-- static validators -->
<validate>
<input type="email" name="email" v-model="model.email" required />
</validate>
<validate>
<input type="text" name="name" v-model="model.name" maxlength="25" minlength="5" />
</validate>
<!-- bound validators -->
<validate>
<input type="email" name="email" v-model="model.email" :required="isRequired" />
</validate>
<validate>
<input type="text" name="name" v-model="model.name" :maxlength="maxLen" :minlength="minLen" />
</validate>
You can register global and local custom validators.
Global custom validator
var options = {
validators: {
'my-custom-validator': function (value, attrValue, vnode) {
// return true to set input as $valid, false to set as $invalid
return value === 'custom';
}
}
}
Vue.use(VueForm, options);
// or
// mixins: [new VueForm(options)]
<validate>
<input v-model="something" name="something" my-custom-validator />
<!--
slot name inside field-messages would be: <div slot="my-custom-validator">...</div>
-->
</validate>
Local custom validator
// ...
methods: {
customValidator: function (value) {
// return true to set input as $valid, false to set as $invalid
return value === 'custom';
}
},
// local custom validator can also be a data or computed property
computed: {
isEmailAvailable function () {
// return true to set input as $valid, false to set as $invalid
}
}
// ...
<validate :custom="{customValidator: customValidator, 'email-available': isEmailAvailable}">
<input v-model="something" name="something" />
<!--
slot name inside field-messages would be: <div slot="customValidator">...</div>
-->
</validate>
Async validators are custom validators which return a Promise. resolve()
true
or false
to set field validity.
// ...
methods: {
customValidator (value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value === 'ajax');
}, 100);
});
}
}
// ...
Async validator with debounce (example uses lodash debounce)
methods: {
debounced: _.debounce(function (value, resolve, reject) {
fetch('https://httpbin.org/get').then(function(response){
resolve(response.isValid);
});
}, 500),
customValidator (value) {
return new Promise((resolve, reject) => {
this.debounced(value, resolve, reject);
});
}
}
<vue-form ref="form" :state="formstate">
resetState: function () {
this.formstate._reset();
// or
this.$refs.form.reset();
}
As form and input validation states change, state classes are added and removed
Possible form classes:
vf-form-dirty, vf-form-pristine, vf-form-valid, vf-form-invalid, vf-form-submitted, vf-form-focused
Possible input classes:
vf-dirty, vf-pristine, vf-valid, vf-invalid, vf-focused
// also for every validation error, a class will be added, e.g.
vf-invalid-required, vf-invalid-minlength, vf-invalid-max, etc
Input wrappers (e.g. the tag the validate
component renders) will also get state classes, but with the field
prefix, e.g.
vf-field-dirty, vf-field-pristine, vf-field-valid, vf-field-invalid, vf-field-focused
When writing custom form field components, e.g. <my-checkbox v-model="foo"></my-checkbox>
you should trigger the focus
and blur
events after user interaction either by triggering native dom events on the root node of your component, or emitting Vue events (this.$emit('focus)
) so the validate
component can detect and set the $dirty
and $touched
states on the field.
state
Object on which form state is settag
String, defaults to form
show-messages
String, applies to all child field-messages
, show errors dependant on form field state e.g. $touched
, $dirty || $touched
, '$touched || $submitted'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 the validate
component, defaults to span
auto-label
: Boolean, defaults to false. Automatically set for
and id
attributes of label and input elements found inside the validate
componentdebounce
Number, defaults to none, which specifies the delay (milliseconds) before validation takes place.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 to div
show
String, show error dependant on form field state e.g. $touched
, $dirty || $touched
, '$touched || $submitted'auto-label
Boolean, defaults to false. Automatically set the for
attribute of labels found inside the field-messages
componenttag
String, defaults to div
auto-label
Boolean, defaults to true. Automatically set for
and id
attributes of label and input elements found inside the validate
componentSet config options when using Vue.use(VueForm, options)
, or when using a mixin mixins: [new VueForm(options)]
defaults:
{
validators: {},
formComponent: 'vueForm',
formTag: 'form',
messagesComponent: 'fieldMessages',
messagesTag: 'div',
showMessages: '',
validateComponent: 'validate',
validateTag: 'div',
fieldComponent: 'field',
fieldTag: 'div',
formClasses: {
dirty: 'vf-form-dirty',
pristine: 'vf-form-pristine',
valid: 'vf-form-valid',
invalid: 'vf-form-invalid',
touched: 'vf-form-touched',
untouched: 'vf-form-untouched',
focused: 'vf-form-focused',
submitted: 'vf-form-submitted',
pending: 'vf-form-pending'
},
validateClasses: {
dirty: 'vf-field-dirty',
pristine: 'vf-field-pristine',
valid: 'vf-field-valid',
invalid: 'vf-field-invalid',
touched: 'vf-field-touched',
untouched: 'vf-field-untouched',
focused: 'vf-field-focused',
submitted: 'vf-field-submitted',
pending: 'vf-field-pending'
},
inputClasses: {
dirty: 'vf-dirty',
pristine: 'vf-pristine',
valid: 'vf-valid',
invalid: 'vf-invalid',
touched: 'vf-touched',
untouched: 'vf-untouched',
focused: 'vf-focused',
submitted: 'vf-submitted',
pending: 'vf-pending'
},
Promise: typeof Promise === 'function' ? Promise : null
}
FAQs
Form validation for Vue.js
The npm package vue-form receives a total of 7,473 weekly downloads. As such, vue-form popularity was classified as popular.
We found that vue-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.