Skip to content

Commit cf29a5b

Browse files
phuocngphuocng
committed
fix: Page has a fixed header
1 parent 7bb14a3 commit cf29a5b

File tree

2 files changed

+165
-0
lines changed

2 files changed

+165
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ Use the [Aria plugin](https://formvalidation.io/guide/plugins/aria) to add ARIA
3535
Use the [AutoFocus plugin](https://formvalidation.io/guide/plugins/auto-focus) to focus on the first invalid element when submit form.
3636

3737
* Basic example: [source](plugin-auto-focus/basic.html), [live demo](https://formvalidation.io/guide/plugins/auto-focus)
38+
* The page has a fixed header: [source](plugin-auto-focus/fixed-header.html)
3839

3940
### Bootstrap plugin
4041

‎plugin-auto-focus/fixed-header.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>AutoFocus plugin - FormValidation</title>
5+
<link
6+
rel="stylesheet"
7+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
8+
/>
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
12+
/>
13+
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
14+
15+
<style>
16+
.header {
17+
background-color: #e5e5e5;
18+
border-bottom: 1px solid #ccc;
19+
padding: 1rem 0;
20+
text-align: center;
21+
position: fixed;
22+
z-index: 999;
23+
left: 0;
24+
top: 0;
25+
width: 100%;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<header class="header" id="header">Header</header>
31+
<div id="container" class="container" style="margin-top: 70px">
32+
<div style="border: 1px solid #ccc; height: 200px"></div>
33+
<form id="demoForm" method="POST">
34+
<div class="form-group">
35+
<label>Product name</label>
36+
<input type="text" class="form-control" name="name" />
37+
</div>
38+
39+
<div class="form-group">
40+
<label>Price</label>
41+
<div class="input-group">
42+
<div class="input-group-prepend">
43+
<span class="input-group-text">$</span>
44+
</div>
45+
<input type="text" class="form-control" name="price" />
46+
</div>
47+
</div>
48+
49+
<div class="form-group">
50+
<label>Size</label>
51+
<div class="form-check">
52+
<input type="checkbox" class="form-check-input" name="size[]" value="s" />
53+
<label class="form-check-label">S</label>
54+
</div>
55+
<div class="form-check">
56+
<input type="checkbox" class="form-check-input" name="size[]" value="m" />
57+
<label class="form-check-label">M</label>
58+
</div>
59+
<div class="form-check">
60+
<input type="checkbox" class="form-check-input" name="size[]" value="l" />
61+
<label class="form-check-label">L</label>
62+
</div>
63+
<div class="form-check">
64+
<input type="checkbox" class="form-check-input" name="size[]" value="xl" />
65+
<label class="form-check-label">XL</label>
66+
</div>
67+
</div>
68+
69+
<div class="form-group">
70+
<label>Available in store</label>
71+
<div class="form-check">
72+
<input type="radio" class="form-check-input" name="availability" value="yes" />
73+
<label class="form-check-label">Yes</label>
74+
</div>
75+
<div class="form-check">
76+
<input type="radio" class="form-check-input" name="availability" value="no" />
77+
<label class="form-check-label">No</label>
78+
</div>
79+
</div>
80+
81+
<div class="form-group">
82+
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
83+
<button type="submit" class="btn btn-primary">Add product</button>
84+
</div>
85+
</form>
86+
</div>
87+
88+
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
89+
<script src="/vendors/@form-validation/umd/plugin-auto-focus/index.min.js"></script>
90+
<script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>
91+
<script>
92+
document.addEventListener('DOMContentLoaded', function (e) {
93+
FormValidation.formValidation(document.getElementById('demoForm'), {
94+
fields: {
95+
name: {
96+
validators: {
97+
notEmpty: {
98+
message: 'The name is required',
99+
},
100+
stringLength: {
101+
min: 6,
102+
max: 30,
103+
message: 'The name must be more than 6 and less than 30 characters long',
104+
},
105+
regexp: {
106+
regexp: /^[a-zA-Z0-9_]+$/,
107+
message: 'The name can only consist of alphabetical, number and underscore',
108+
},
109+
},
110+
},
111+
price: {
112+
validators: {
113+
notEmpty: {
114+
message: 'The price is required',
115+
},
116+
numeric: {
117+
message: 'The price must be a number',
118+
},
119+
},
120+
},
121+
'size[]': {
122+
validators: {
123+
notEmpty: {
124+
message: 'The size is required',
125+
},
126+
},
127+
},
128+
availability: {
129+
validators: {
130+
notEmpty: {
131+
message: 'The availability option is required',
132+
},
133+
},
134+
},
135+
},
136+
plugins: {
137+
autoFocus: new FormValidation.plugins.AutoFocus({
138+
// This will be called before the field gets focused
139+
onPrefocus: function (e) {
140+
const fieldEle = e.firstElement;
141+
142+
// Get the field container that also contains the field label
143+
const fieldParent = fieldEle.closest('.form-group');
144+
145+
// Get the header height
146+
const headerHeight = document.getElementById('header').getBoundingClientRect().height;
147+
148+
window.scrollTo(0, fieldParent.offsetTop - headerHeight);
149+
},
150+
}),
151+
trigger: new FormValidation.plugins.Trigger(),
152+
bootstrap: new FormValidation.plugins.Bootstrap(),
153+
submitButton: new FormValidation.plugins.SubmitButton(),
154+
icon: new FormValidation.plugins.Icon({
155+
valid: 'fa fa-check',
156+
invalid: 'fa fa-times',
157+
validating: 'fa fa-refresh',
158+
}),
159+
},
160+
});
161+
});
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)