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

Commit aa66206

Browse files
alvarosabualvarosabu
authored
Merge pull request #34 from alvarosaburido/feature/url_validation
Feature/url validation
2 parents 0730769 + 9cc6fbc commit aa66206

File tree

10 files changed

+947
-80
lines changed

10 files changed

+947
-80
lines changed

‎dev/App.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import {
5252
email,
5353
pattern,
5454
maxLength,
55+
url,
5556
/* } from '../dist/as-dynamic-forms.common'; */
5657
} from '../src/main';
5758
@@ -109,6 +110,13 @@ const data = () => ({
109110
),
110111
],
111112
}),
113+
new FormField({
114+
type: 'url',
115+
label: 'Website',
116+
name: 'website',
117+
customClass: 'col-12',
118+
validations: [new FormValidation(url, `Format of Url is incorrect`)],
119+
}),
112120
new FormField({
113121
type: 'select',
114122
label: 'Category',

‎docs/.vuepress/components/ValidationEmail.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
@change="updateForm"
99
/>
1010
<p class="hint">
11-
Please change the value to see the validation working 👆🏻
11+
Please change the value and press enter (blur) to see the validation
12+
working 👆🏻
1213
</p>
1314
</div>
1415
<div class="col">

‎docs/.vuepress/components/ValidationPattern.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
@change="updateForm"
99
/>
1010
<p class="hint">
11-
Please change the value to see the validation working 👆🏻
11+
Please change the value and press enter (blur) to see the validation
12+
working 👆🏻
1213
</p>
1314
</div>
1415
<div class="col">

‎docs/.vuepress/components/ValidationUrl.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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 and press enter (blur) to see the validation
12+
working 👆🏻
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+
url,
28+
} from '../../../dist/as-dynamic-forms.common';
29+
30+
export default {
31+
name: 'ValidationUrlDemo',
32+
components: {
33+
DynamicForm,
34+
},
35+
data: () => ({
36+
formData: null,
37+
testForm: {
38+
id: 'validation-url-demo',
39+
fields: [
40+
new FormField({
41+
type: 'url',
42+
label: 'Website',
43+
name: 'website',
44+
value: 'http://bah',
45+
validations: [new FormValidation(url, 'Format of url is incorrect')],
46+
}),
47+
],
48+
options: new FormOptions({ autoValidate: true }),
49+
},
50+
}),
51+
methods: {
52+
updateForm(values) {
53+
this.formData = values;
54+
},
55+
},
56+
};
57+
</script>
58+
59+
<style lang="scss">
60+
@import '../styles/styles.scss';
61+
62+
.form-composition {
63+
display: flex;
64+
justify-content: space-between;
65+
}
66+
.col {
67+
width: 45%;
68+
}
69+
pre {
70+
color: white;
71+
font-size: 12px;
72+
}
73+
</style>

‎docs/.vuepress/dist/assets/js/15.80d5cf4e.js‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,94 @@
1-
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{339:function(a,t,i){},396:function(a,t,i){"use strict";var o=i(339);i.n(o).a},418:function(a,t,i){"use strict";i.r(t);var o=i(303),e={name:"ValidationEmailDemo",components:{DynamicForm:o.DynamicForm},data:function(){return{formData:null,testForm:{id:"validation-email-demo",fields:[new o.FormField({type:"email",label:"Email",name:"email",value:"awesome_avocad",validations:[new o.FormValidation(o.email,"Format of email is incorrect")]})],options:new o.FormOptions({autoValidate:!0})}}},methods:{updateForm:function(a){this.formData=a}}},n=(i(396),i(44)),s=Object(n.a)(e,(function(){var a=this,t=a.$createElement,i=a._self._c||t;return i("div",{staticClass:"form-composition library-example"},[i("div",{staticClass:"col"},[i("dynamic-form",{attrs:{id:a.testForm.id,fields:a.testForm.fields,options:a.testForm.options},on:{change:a.updateForm}}),a._v(" "),i("p",{staticClass:"hint"},[a._v("\n Please change the value to see the validation working 👆🏻\n ")])],1),a._v(" "),i("div",{staticClass:"col"},[i("pre",[a._v(a._s(a.formData))])])])}),[],!1,null,null,null);t.default=s.exports}}]);
1+
(window.webpackJsonp = window.webpackJsonp || []).push([
2+
[15],
3+
{
4+
339: function (a, t, i) {},
5+
396: function (a, t, i) {
6+
'use strict';
7+
var o = i(339);
8+
i.n(o).a;
9+
},
10+
418: function (a, t, i) {
11+
'use strict';
12+
i.r(t);
13+
var o = i(303),
14+
e = {
15+
name: 'ValidationEmailDemo',
16+
components: { DynamicForm: o.DynamicForm },
17+
data: function () {
18+
return {
19+
formData: null,
20+
testForm: {
21+
id: 'validation-email-demo',
22+
fields: [
23+
new o.FormField({
24+
type: 'email',
25+
label: 'Email',
26+
name: 'email',
27+
value: 'awesome_avocad',
28+
validations: [
29+
new o.FormValidation(
30+
o.email,
31+
'Format of email is incorrect',
32+
),
33+
],
34+
}),
35+
],
36+
options: new o.FormOptions({ autoValidate: !0 }),
37+
},
38+
};
39+
},
40+
methods: {
41+
updateForm: function (a) {
42+
this.formData = a;
43+
},
44+
},
45+
},
46+
n = (i(396), i(44)),
47+
s = Object(n.a)(
48+
e,
49+
function () {
50+
var a = this,
51+
t = a.$createElement,
52+
i = a._self._c || t;
53+
return i(
54+
'div',
55+
{ staticClass: 'form-composition library-example' },
56+
[
57+
i(
58+
'div',
59+
{ staticClass: 'col' },
60+
[
61+
i('dynamic-form', {
62+
attrs: {
63+
id: a.testForm.id,
64+
fields: a.testForm.fields,
65+
options: a.testForm.options,
66+
},
67+
on: { change: a.updateForm },
68+
}),
69+
a._v(' '),
70+
i('p', { staticClass: 'hint' }, [
71+
a._v(
72+
'\n Please change the value and press enter (blur) to see the validation working 👆🏻\n ',
73+
),
74+
]),
75+
],
76+
1,
77+
),
78+
a._v(' '),
79+
i('div', { staticClass: 'col' }, [
80+
i('pre', [a._v(a._s(a.formData))]),
81+
]),
82+
],
83+
);
84+
},
85+
[],
86+
!1,
87+
null,
88+
null,
89+
null,
90+
);
91+
t.default = s.exports;
92+
},
93+
},
94+
]);

‎docs/.vuepress/dist/assets/js/20.9c439f6c.js‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,97 @@
1-
(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{344:function(t,a,e){},401:function(t,a,e){"use strict";var s=e(344);e.n(s).a},423:function(t,a,e){"use strict";e.r(a);var s=e(303),o={name:"ValidationPatternDemo",components:{DynamicForm:s.DynamicForm},data:function(){return{formData:null,testForm:{id:"validation-pattern-demo",fields:[new s.FormField({type:"password",label:"Password",name:"password",customClass:"col-12",validations:[new s.FormValidation(Object(s.pattern)("^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[#$^+=!*()@%&]).{8,10}$"),"Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10")],value:"sdsdsd"})],options:new s.FormOptions({autoValidate:!0})}}},methods:{updateForm:function(t){this.formData=t}}},n=(e(401),e(44)),i=Object(n.a)(o,(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"form-composition library-example"},[e("div",{staticClass:"col"},[e("dynamic-form",{attrs:{id:t.testForm.id,fields:t.testForm.fields,options:t.testForm.options},on:{change:t.updateForm}}),t._v(" "),e("p",{staticClass:"hint"},[t._v("\n Please change the value to see the validation working 👆🏻\n ")])],1),t._v(" "),e("div",{staticClass:"col"},[e("pre",[t._v(t._s(t.formData))])])])}),[],!1,null,null,null);a.default=i.exports}}]);
1+
(window.webpackJsonp = window.webpackJsonp || []).push([
2+
[20],
3+
{
4+
344: function (t, a, e) {},
5+
401: function (t, a, e) {
6+
'use strict';
7+
var s = e(344);
8+
e.n(s).a;
9+
},
10+
423: function (t, a, e) {
11+
'use strict';
12+
e.r(a);
13+
var s = e(303),
14+
o = {
15+
name: 'ValidationPatternDemo',
16+
components: { DynamicForm: s.DynamicForm },
17+
data: function () {
18+
return {
19+
formData: null,
20+
testForm: {
21+
id: 'validation-pattern-demo',
22+
fields: [
23+
new s.FormField({
24+
type: 'password',
25+
label: 'Password',
26+
name: 'password',
27+
customClass: 'col-12',
28+
validations: [
29+
new s.FormValidation(
30+
Object(s.pattern)(
31+
'^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[#$^+=!*()@%&]).{8,10}$',
32+
),
33+
'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
34+
),
35+
],
36+
value: 'sdsdsd',
37+
}),
38+
],
39+
options: new s.FormOptions({ autoValidate: !0 }),
40+
},
41+
};
42+
},
43+
methods: {
44+
updateForm: function (t) {
45+
this.formData = t;
46+
},
47+
},
48+
},
49+
n = (e(401), e(44)),
50+
i = Object(n.a)(
51+
o,
52+
function () {
53+
var t = this,
54+
a = t.$createElement,
55+
e = t._self._c || a;
56+
return e(
57+
'div',
58+
{ staticClass: 'form-composition library-example' },
59+
[
60+
e(
61+
'div',
62+
{ staticClass: 'col' },
63+
[
64+
e('dynamic-form', {
65+
attrs: {
66+
id: t.testForm.id,
67+
fields: t.testForm.fields,
68+
options: t.testForm.options,
69+
},
70+
on: { change: t.updateForm },
71+
}),
72+
t._v(' '),
73+
e('p', { staticClass: 'hint' }, [
74+
t._v(
75+
'\n Please change the value and press enter (blur) to see the validation working 👆🏻\n ',
76+
),
77+
]),
78+
],
79+
1,
80+
),
81+
t._v(' '),
82+
e('div', { staticClass: 'col' }, [
83+
e('pre', [t._v(t._s(t.formData))]),
84+
]),
85+
],
86+
);
87+
},
88+
[],
89+
!1,
90+
null,
91+
null,
92+
null,
93+
);
94+
a.default = i.exports;
95+
},
96+
},
97+
]);

0 commit comments

Comments
 (0)