1 | # [vueform](https://vueform.optick.io)
|
2 |
|
3 | > Form validation for [Vue.js](https://vuejs.org/) powered by HTML5
|
4 |
|
5 | ## Features
|
6 |
|
7 | * Easy: integrates with Vue.js to provide a reactive interface for working with
|
8 | validity state.
|
9 | * Lightweight: uses the HTML5 validation API whenever possible.
|
10 | * Flexible: allows you to set the validity state within your own custom
|
11 | validators.
|
12 | * Convenient: adds a configurable `.wasSubmitted` class to your forms when they
|
13 | are submitted and `.wasFocused` class to your fields when they are focused so
|
14 | that you're able to have more control when styling invalid fields with the
|
15 | `:invalid` psuedo-class.
|
16 |
|
17 | ## Instructions
|
18 |
|
19 | 1. Install `vueform`:
|
20 |
|
21 | ```
|
22 | npm install vueform --save
|
23 | ```
|
24 |
|
25 | 2. Tell Vue.js to use vueform and then create a new form in your component data
|
26 | hook:
|
27 |
|
28 | ```js
|
29 | import Vue from 'vue'
|
30 | import VueForm from 'vueform'
|
31 |
|
32 | Vue.use(VueForm)
|
33 |
|
34 | //...
|
35 | data() {
|
36 | return {
|
37 | contactForm: new VueForm()
|
38 | }
|
39 | }
|
40 | //...
|
41 | ```
|
42 |
|
43 | 3. Pass the form object to vueform with the `v-form` directive:
|
44 |
|
45 | ```html
|
46 | <form v-form="contactForm">
|
47 | <!-- ... -->
|
48 | </form>
|
49 | ```
|
50 |
|
51 | 4. Add a form field to the form. Make sure it has an `id`:
|
52 |
|
53 | ```html
|
54 | <label for="name">Name:</label>
|
55 | <input type="text" id="name" v-model="contactData.name" required>
|
56 | ```
|
57 |
|
58 | 5. By default, your form will be set to `noValidate` which tells the browser to
|
59 | *slow it's roll* and gives you more control over the validation process. This
|
60 | means the browser won't show validation error messages. You can either
|
61 | display your own validation error messages, for example:
|
62 |
|
63 | ```html
|
64 | <div v-if="contactForm.$wasSubmitted" class="colorRed">
|
65 | <div v-if="contactForm.name.valueMissing">
|
66 | Name is required.
|
67 | </div>
|
68 | <div v-if="contactForm.name.patternMismatch">
|
69 | Please use only letters, spaces, dashes, and apostrophes.
|
70 | </div>
|
71 | </div>
|
72 | ```
|
73 |
|
74 | Or disable `noValidate` so that the browser displays validation error
|
75 | messages, by passing the `noValidate: false` option when creating your form,
|
76 | for example:
|
77 |
|
78 | ```js
|
79 | contactForm: new VueForm({ noValidate: false })
|
80 | ```
|
81 |
|
82 | ## API
|
83 |
|
84 | VueForm constructor options (with default values):
|
85 |
|
86 | ```js
|
87 | {
|
88 | wasFocusedClass: `wasFocused`
|
89 | wasSubmittedClass: `wasSubmitted`
|
90 | noValidate: true
|
91 | }
|
92 | ```
|
93 |
|
94 | VueForm properties:
|
95 |
|
96 | | Property | Type | Description |
|
97 | |-----------------|---------|------------------------------------------|
|
98 | | `$wasSubmitted` | boolean | True if the form was submitted. |
|
99 | | `$isInvalid` | boolean | True if the form is invalid. |
|
100 | | `$isValid` | boolean | True if the form is valid. |
|
101 | | `$invalidFields`| array | A collection of names of invalid fields. |
|
102 |
|
103 | VueForm methods:
|
104 |
|
105 | | Method | Parameters | Description |
|
106 | |-------------------------|------------|---------------------------------------|
|
107 | | `$setCustomValidity` | `field`: string, `invalid`: boolean or string | A convenience wrapper for element.setCustomValidity(). Useful when updating the validity of a field based on a custom validator. |
|