forked from form-validation/examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
custom-message.html
177 lines (172 loc) · 9.48 KB
/
custom-message.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<title>PasswordStrength 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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<div class="container mt-5">
<form id="demoForm" method="POST">
<div class="form-group row">
<label class="col-md-3 col-form-label">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" name="pwd" />
<!-- The progress bar is hidden initially -->
<div class="progress mt-2">
<div id="progressBar" class="progress-bar progress-bar-striped" style="width: 0%"></div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-9 offset-md-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-password-strength/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
const form = document.getElementById('demoForm');
const progressBar = document.getElementById('progressBar');
const fv = FormValidation.formValidation(form, {
fields: {
pwd: {
validators: {
notEmpty: {
message: 'The password is required',
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
submitButton: new FormValidation.plugins.SubmitButton(),
bootstrap: new FormValidation.plugins.Bootstrap(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
passwordStrength: new FormValidation.plugins.PasswordStrength({
field: 'pwd',
message: 'The password is weak',
minimalScore: 3,
onValidated: function (valid, message, score) {
switch (score) {
case 0:
progressBar.setAttribute(
'class',
'progress-bar progress-bar-striped progress-bar-danger'
);
progressBar.style.width = '1%';
break;
case 1:
progressBar.setAttribute(
'class',
'progress-bar progress-bar-striped progress-bar-danger'
);
progressBar.style.width = '25%';
break;
case 2:
progressBar.setAttribute(
'class',
'progress-bar progress-bar-striped progress-bar-danger'
);
progressBar.style.width = '50%';
break;
case 3:
progressBar.setAttribute(
'class',
'progress-bar progress-bar-striped progress-bar-warning'
);
progressBar.style.width = '75%';
break;
case 4:
progressBar.setAttribute(
'class',
'progress-bar progress-bar-striped progress-bar-success'
);
progressBar.style.width = '100%';
break;
default:
break;
}
},
}),
},
}).on('plugins.message.displayed', function (e) {
if (
e.field === 'pwd' &&
e.validator === FormValidation.plugins.PasswordStrength.PASSWORD_STRENGTH_VALIDATOR
) {
let message = e.message;
// zxcvbn's messages can be found at
// https://github.com/dropbox/zxcvbn/blob/master/src/feedback.coffee
switch (message) {
case 'Straight rows of keys are easy to guess':
// Translate the message
message = 'Translation of (Straight rows of keys are easy to guess)';
break;
case 'Short keyboard patterns are easy to guess':
message = 'Translation of (Short keyboard patterns are easy to guess)';
break;
case 'Repeats like "aaa" are easy to guess':
message = 'Translation of (Repeats like "aaa" are easy to guess)';
break;
case 'Repeats like "abcabcabc" are only slightly harder to guess than "abc"':
message =
'Translation of (Repeats like "abcabcabc" are only slightly harder to guess than "abc")';
break;
case 'Sequences like abc or 6543 are easy to guess':
message = 'Translation of (Sequences like abc or 6543 are easy to guess)';
break;
case 'Recent years are easy to guess':
message = 'Translation of (Recent years are easy to guess)';
break;
case 'Dates are often easy to guess':
message = 'Translation of (Dates are often easy to guess)';
break;
case 'This is a top-10 common password':
message = 'Translation of (This is a top-10 common password)';
break;
case 'This is a top-100 common password':
message = 'Translation of (This is a top-100 common password)';
break;
case 'This is a very common password':
message = 'Translation of (This is a very common password)';
break;
case 'This is similar to a commonly used password':
message = 'Translation of (This is similar to a commonly used password)';
break;
case 'A word by itself is easy to guess':
message = 'Translation of (A word by itself is easy to guess)';
break;
case 'Names and surnames by themselves are easy to guess':
message = 'Translation of (Names and surnames by themselves are easy to guess)';
break;
case 'Common names and surnames are easy to guess':
message = 'Translation of (Common names and surnames are easy to guess)';
break;
}
// Update the error message with translated version
e.messageElement.innerHTML = message;
}
});
});
</script>
</body>
</html>