Skip to content

Commit e412475

Browse files
phuocngphuocng
committed
feat: turnstile plugin examples
1 parent 3ecfa42 commit e412475

File tree

2 files changed

+269
-0
lines changed

2 files changed

+269
-0
lines changed

‎plugin-turnstile/basic.html

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

‎plugin-turnstile/invisible-challenge.html

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

0 commit comments

Comments
 (0)