Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit f037631

Browse files
alvarosabualvarosabu
committed
Validation docs
1 parent 2b82290 commit f037631

File tree

9 files changed

+789
-0
lines changed

9 files changed

+789
-0
lines changed

‎docs/.vuepress/components/ValidationEmail.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
/>
10+
<p class="hint">
11+
Please change the value to see the validation working 👆🏻
12+
</p>
13+
</div>
14+
<div class="col">
15+
<pre>{{ formData }}</pre>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import {
22+
DynamicForm,
23+
FormField,
24+
FormOptions,
25+
FormValidation,
26+
email,
27+
} from '../../../dist/as-dynamic-forms.common';
28+
29+
export default {
30+
name: 'ValidationEmailDemo',
31+
components: {
32+
DynamicForm,
33+
},
34+
data: () => ({
35+
formData: null,
36+
testForm: {
37+
id: 'validation-email-demo',
38+
fields: [
39+
new FormField({
40+
type: 'email',
41+
label: 'Email',
42+
name: 'email',
43+
value: 'awesome_avocad',
44+
validations: [
45+
new FormValidation(required, 'This field is required'),
46+
new FormValidation(email, 'Format of email is incorrect'),
47+
],
48+
}),
49+
],
50+
options: new FormOptions({ autoValidate: true }),
51+
},
52+
}),
53+
methods: {
54+
updateForm(values) {
55+
this.formData = values;
56+
},
57+
},
58+
};
59+
</script>
60+
61+
<style lang="scss">
62+
@import '../styles/styles.scss';
63+
64+
.form-composition {
65+
display: flex;
66+
justify-content: space-between;
67+
}
68+
.col {
69+
width: 45%;
70+
}
71+
pre {
72+
color: white;
73+
font-size: 12px;
74+
}
75+
</style>

‎docs/.vuepress/components/ValidationMax.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
/>
10+
<p class="hint">
11+
Increase +1 number and blur to see the validation working 👆🏻
12+
</p>
13+
</div>
14+
<div class="col">
15+
<pre>{{ formData }}</pre>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import {
22+
DynamicForm,
23+
FormField,
24+
FormOptions,
25+
FormValidation,
26+
max,
27+
} from '../../../dist/as-dynamic-forms.common';
28+
29+
const MAX_VALUE = 5;
30+
31+
export default {
32+
name: 'ValidationMinDemo',
33+
components: {
34+
DynamicForm,
35+
},
36+
data: () => ({
37+
formData: null,
38+
testForm: {
39+
id: 'validation-max-demo',
40+
fields: [
41+
new FormField({
42+
type: 'number',
43+
label: 'Number',
44+
name: 'maxNumber',
45+
value: 5,
46+
validations: [
47+
new FormValidation(
48+
max(MAX_VALUE),
49+
`Value should be less than: ${MAX_VALUE}`,
50+
),
51+
],
52+
}),
53+
],
54+
options: new FormOptions({ autoValidate: true }),
55+
},
56+
}),
57+
methods: {
58+
updateForm(values) {
59+
this.formData = values;
60+
},
61+
},
62+
};
63+
</script>
64+
65+
<style lang="scss">
66+
@import '../styles/styles.scss';
67+
68+
.form-composition {
69+
display: flex;
70+
justify-content: space-between;
71+
}
72+
.col {
73+
width: 45%;
74+
}
75+
pre {
76+
color: white;
77+
font-size: 12px;
78+
}
79+
</style>

‎docs/.vuepress/components/ValidationMaxLength.vue

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
/>
10+
<p class="hint">
11+
Add the tweet enough characters and blur to see the validation working
12+
👆🏻
13+
</p>
14+
</div>
15+
<div class="col">
16+
<pre>{{ formData }}</pre>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script>
22+
import {
23+
DynamicForm,
24+
FormField,
25+
FormOptions,
26+
FormValidation,
27+
maxLength,
28+
} from '../../../dist/as-dynamic-forms.common';
29+
30+
const MAX_VALUE = 280;
31+
32+
export default {
33+
name: 'ValidationMinDemo',
34+
components: {
35+
DynamicForm,
36+
},
37+
data: () => ({
38+
formData: null,
39+
testForm: {
40+
id: 'validation-max-length-demo',
41+
fields: [
42+
new FormField({
43+
type: 'textarea',
44+
label: 'Tweet',
45+
name: 'tweet',
46+
rows: 16,
47+
value:
48+
'Prism whatever occupy, stumptown polaroid butcher activated charcoal seitan cornhole direct trade coloring book offal sriracha. 8-bit pitchfork kitsch crucifix chartreuse, tumblr adaptogen brunch stumptown. Drinking vinegar yuccie echo park lo-fi, poutine unicorn raclette adaptogen kale chips chia. Deep v austin fam organic kickstarter hexagon hell of wolf pour-over YOLO. 8-bit glossier lyft authentic, selfies aesthetic kinfolk prism tattooed irony quinoa distillery pug slow-carb post-ironic.',
49+
validations: [
50+
new FormValidation(
51+
maxLength(MAX_VALUE),
52+
`Tweet shouldn't be more than: ${MAX_VALUE} characters`,
53+
),
54+
],
55+
}),
56+
],
57+
options: new FormOptions({ autoValidate: true }),
58+
},
59+
}),
60+
methods: {
61+
updateForm(values) {
62+
this.formData = values;
63+
},
64+
},
65+
};
66+
</script>
67+
68+
<style lang="scss">
69+
@import '../styles/styles.scss';
70+
71+
.form-composition {
72+
display: flex;
73+
justify-content: space-between;
74+
}
75+
.col {
76+
width: 45%;
77+
}
78+
pre {
79+
color: white;
80+
font-size: 12px;
81+
}
82+
</style>

‎docs/.vuepress/components/ValidationMin.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
/>
10+
<p class="hint">
11+
Decrease -1 number and blur to see the validation working 👆🏻
12+
</p>
13+
</div>
14+
<div class="col">
15+
<pre>{{ formData }}</pre>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import {
22+
DynamicForm,
23+
FormField,
24+
FormOptions,
25+
FormValidation,
26+
min,
27+
} from '../../../dist/as-dynamic-forms.common';
28+
29+
const MIN_VALUE = 5;
30+
31+
export default {
32+
name: 'ValidationMinDemo',
33+
components: {
34+
DynamicForm,
35+
},
36+
data: () => ({
37+
formData: null,
38+
testForm: {
39+
id: 'validation-min-demo',
40+
fields: [
41+
new FormField({
42+
type: 'number',
43+
label: 'Number',
44+
name: 'minNumber',
45+
value: 5,
46+
validations: [
47+
new FormValidation(
48+
min(MIN_VALUE),
49+
`Value should be bigger than: ${MIN_VALUE}`,
50+
),
51+
],
52+
}),
53+
],
54+
options: new FormOptions({ autoValidate: true }),
55+
},
56+
}),
57+
methods: {
58+
updateForm(values) {
59+
this.formData = values;
60+
},
61+
},
62+
};
63+
</script>
64+
65+
<style lang="scss">
66+
@import '../styles/styles.scss';
67+
68+
.form-composition {
69+
display: flex;
70+
justify-content: space-between;
71+
}
72+
.col {
73+
width: 45%;
74+
}
75+
pre {
76+
color: white;
77+
font-size: 12px;
78+
}
79+
</style>

‎docs/.vuepress/components/ValidationMinLength.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="form-composition library-example">
3+
<div class="col">
4+
<dynamic-form
5+
:id="testForm.id"
6+
:fields="testForm.fields"
7+
:options="testForm.options"
8+
@change="updateForm"
9+
/>
10+
<p class="hint">
11+
Remove -1 character and blur to see the validation working 👆🏻
12+
</p>
13+
</div>
14+
<div class="col">
15+
<pre>{{ formData }}</pre>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import {
22+
DynamicForm,
23+
FormField,
24+
FormOptions,
25+
FormValidation,
26+
minLength,
27+
} from '../../../dist/as-dynamic-forms.common';
28+
29+
const MIN_VALUE = 7;
30+
31+
export default {
32+
name: 'ValidationMinDemo',
33+
components: {
34+
DynamicForm,
35+
},
36+
data: () => ({
37+
formData: null,
38+
testForm: {
39+
id: 'validation-min-length-demo',
40+
fields: [
41+
new FormField({
42+
type: 'text',
43+
label: 'Username',
44+
name: 'username',
45+
value: 'avocado',
46+
validations: [
47+
new FormValidation(
48+
minLength(MIN_VALUE),
49+
`Text length should be bigger than: ${MIN_VALUE}`,
50+
),
51+
],
52+
}),
53+
],
54+
options: new FormOptions({ autoValidate: true }),
55+
},
56+
}),
57+
methods: {
58+
updateForm(values) {
59+
this.formData = values;
60+
},
61+
},
62+
};
63+
</script>
64+
65+
<style lang="scss">
66+
@import '../styles/styles.scss';
67+
68+
.form-composition {
69+
display: flex;
70+
justify-content: space-between;
71+
}
72+
.col {
73+
width: 45%;
74+
}
75+
pre {
76+
color: white;
77+
font-size: 12px;
78+
}
79+
</style>

0 commit comments

Comments
 (0)