-
Notifications
You must be signed in to change notification settings - Fork 34
/
Copy pathindex.html
114 lines (104 loc) · 4.13 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title><auto-check> element</title>
<style>
auto-check {
display: block;
}
</style>
</head>
<body>
<main>
<h1>auto-check-element</h1>
<h2>Simple form</h2>
<h2 tabindex="-1" id="success1" class="success" hidden>Your submission was successful</h2>
<form>
<p>All fields marked with * are required</p>
<label for="simple-field">Desired username*:</label>
<auto-check csrf="foo" src="/demo" required>
<input id="simple-field" autofocus name="foo" required aria-describedby="state1" />
<p id="state1" aria-atomic="true" aria-live="polite" class="state"></p>
</auto-check>
<button value="1" name="form">submit</button>
</form>
<h2>Form that has custom validity messages</h2>
<p>Input 422 for an error response.</p>
<h2 tabindex="-1" id="success2" class="success" hidden>Your submission was successful</h2>
<form id="custom">
<p>All fields marked with * are required</p>
<label for="custom-field">Desired username*:</label>
<auto-check csrf="foo" src="/demo" required>
<input id="custom-field" autofocus class="json" name="foo" required aria-describedby="state2" />
<p id="state2" aria-atomic="true" aria-live="polite" class="state"></p>
</auto-check>
<button value="2" name="form">submit</button>
</form>
<h2>only-validate-on-blur with custom validity messages</h2>
<h2 tabindex="-1" id="success3" class="success" hidden>Your submission was successful</h2>
<form id="custom2">
<p>All fields marked with * are required</p>
<label for="simple-field2">Desired username*:</label>
<auto-check csrf="foo" src="/demo" required only-validate-on-blur>
<input id="simple-field2" autofocus name="foo" required aria-describedby="state3" />
<p id="state3" aria-atomic="true" aria-live="polite" class="state"></p>
</auto-check>
<button value="3" name="form">submit</button>
</form>
</main>
<script>
let successN = new URL(window.location).searchParams.get('form')
if (successN) {
document.getElementById(`success${successN}`).hidden = false
document.getElementById(`success${successN}`).focus()
}
let focusedInput
const nativeFetch = window.fetch
const fakeFetch = function (_, options) {
if (options.body.get('value') === '422') {
return Promise.resolve(
new Response(JSON.stringify({message: '422'}), {
status: 422,
}),
)
}
return Promise.resolve(
new Response(JSON.stringify({message: 'success'}), {
status: 200,
}),
)
}
window.fetch = fakeFetch
for (const form of document.forms) {
const formInput = form.querySelector('input')
const button = form.querySelector('button')
const state = form.querySelector('.state')
formInput.addEventListener('focus', () => {
focusedInput = formInput
})
form.addEventListener('auto-check-start', () => {
if (form.id.includes('custom')) {
const {setValidity} = event.detail
setValidity('🔍 Checking validity...')
}
state.textContent = 'loading'
})
form.addEventListener('auto-check-success', event => {
state.textContent = 'succeeded'
})
form.addEventListener('auto-check-error', event => {
if (form.id.includes('custom')) {
const {setValidity} = event.detail
setValidity('🚫 Something went wrong. Please try again')
}
state.textContent = 'something went wrong, please try again'
})
form.addEventListener('auto-check-complete', () => {
if (state.textContent === 'loading') state.textContent = ''
})
}
</script>
<script type="module" src="https://unpkg.com/@github/auto-check-element@latest"></script>
<!-- <script type="module" src="../dist/bundle.js" defer></script> -->
</body>
</html>