/
widget.html
executable file
·132 lines (126 loc) · 5.7 KB
/
widget.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recaptcha plugin - FormValidation</title>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" />
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Username</div>
<div class="fl w-50">
<input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="username" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Email address</div>
<div class="fl w-50">
<input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="email" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Password</div>
<div class="fl w-50">
<input type="password" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="password" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Captcha</div>
<div class="fl w-50">
<!-- The captcha container -->
<div id="captchaContainer"></div>
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2"></div>
<div class="fl w-50">
<button type="submit" class="ba b--black-20 bg-blue white ph3 pv2 br2">Submit</button>
</div>
</div>
</div>
</form>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-recaptcha/index.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-tachyons/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
FormValidation.formValidation(document.getElementById('demoForm'), {
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required',
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long',
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message:
'The username can only consist of alphabetical, number, dot and underscore',
},
},
},
email: {
validators: {
notEmpty: {
message: 'The email address is required',
},
emailAddress: {
message: 'The input is not a valid email address',
},
},
},
password: {
validators: {
notEmpty: {
message: 'The password is required',
},
different: {
field: 'username',
message: 'The password cannot be the same as username',
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
tachyons: new FormValidation.plugins.Tachyons(),
submitButton: new FormValidation.plugins.SubmitButton(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
recaptcha: new FormValidation.plugins.Recaptcha({
element: 'captchaContainer',
message: 'The captcha is not valid',
// Replace with the site key provided by Google
siteKey: '6Letq1wUAAAAAPOueXjmi7-Xt0fZyqFLB0GYzeNz',
theme: 'light',
timeout: 120,
}),
},
});
});
</script>
</body>
</html>