Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vee-validate
Advanced tools
Changelog
4.12.6
Readme
Painless Vue forms
# Install with yarn
yarn add vee-validate
# Install with npm
npm install vee-validate --save
The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table
vue Version | vee-validate version | Documentation Link |
---|---|---|
2.x | 2.x or 3.x | v2 or v3 |
3.x | 4.x | v4 |
vee-validate offers two styles to integrate form validation into your Vue.js apps.
The fastest way to create a form and manage its validation, behavior, and values is with the composition API.
Create your form with useForm
and then use defineField
to create your field model and props/attributes and handleSubmit
to use the values and send them to an API.
<script setup>
import { useForm } from 'vee-validate';
// Validation, or use `yup` or `zod`
function required(value) {
return value ? true : 'This field is required';
}
// Create the form
const { defineField, handleSubmit, errors } = useForm({
validationSchema: {
field: required,
},
});
// Define fields
const [field, fieldProps] = defineField('field');
// Submit handler
const onSubmit = handleSubmit(values => {
// Submit to API
console.log(values);
});
</script>
<template>
<form @submit="onSubmit">
<input v-model="field" v-bind="fieldProps" />
<span>{{ errors.field }}</span>
<button>Submit</button>
</form>
</template>
You can do so much more than this, for more info check the composition API documentation.
Higher-order components can also be used to build forms. Register the Field
and Form
components and create a simple required
validator:
<script setup>
import { Field, Form } from 'vee-validate';
// Validation, or use `yup` or `zod`
function required(value) {
return value ? true : 'This field is required';
}
// Submit handler
function onSubmit(values) {
// Submit to API
console.log(values);
}
</script>
<template>
<Form v-slot="{ errors }" @submit="onSubmit">
<Field name="field" :rules="required" />
<span>{{ errors.field }}</span>
<button>Submit</button>
</Form>
</template>
The Field
component renders an input
of type text
by default but you can control that
Read the documentation and demos.
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
Here we honor past contributors and sponsors who have been a major part on this project.
FAQs
Painless forms for Vue.js
The npm package vee-validate receives a total of 434,094 weekly downloads. As such, vee-validate popularity was classified as popular.
We found that vee-validate demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.