bootstrapvalidator5 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +429 -0
- package/bootstrapValidator5.css +41 -0
- package/bootstrapValidator5.js +8184 -0
- package/package.json +25 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 dhiauddin
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,429 @@
|
|
|
1
|
+
|
|
2
|
+
# 🧩 Bootstrap Validator (Revived for Bootstrap 5)
|
|
3
|
+
|
|
4
|
+
> A modernized, fully working version of the original **BootstrapValidator.js**
|
|
5
|
+
> (originally built for Bootstrap 3 by @nghuuphuoc), now updated and refactored
|
|
6
|
+
> to work seamlessly with **Bootstrap 5.3+** — while still remaining compatible
|
|
7
|
+
> with legacy Bootstrap 3 markup.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 🚀 Introduction
|
|
12
|
+
|
|
13
|
+
The original **BootstrapValidator** plugin was one of the most powerful jQuery-based
|
|
14
|
+
form validation libraries for Bootstrap 3. Unfortunately, it was deprecated years ago
|
|
15
|
+
and replaced by **FormValidation.io**, a paid commercial successor. The open-source
|
|
16
|
+
documentation and examples eventually disappeared.
|
|
17
|
+
|
|
18
|
+
This repository brings it **back to life**, enhanced for **modern web projects**.
|
|
19
|
+
It is a **plain-text, human-readable JavaScript version** that:
|
|
20
|
+
|
|
21
|
+
- ✅ Works with **Bootstrap 5.3+**, **Bootstrap 4**, and **Bootstrap 3**
|
|
22
|
+
- ✅ Keeps all the **original built-in validators** (25+ types)
|
|
23
|
+
- ✅ Adds Bootstrap 5-style feedback classes (`.is-valid` / `.is-invalid`)
|
|
24
|
+
- ✅ Retains legacy `.has-success` / `.has-error` for backward compatibility
|
|
25
|
+
- ✅ Moves validation icons **inside** the feedback message for cleaner markup
|
|
26
|
+
- ✅ Uses modern `.invalid-feedback` / `.valid-feedback` blocks (no `.help-block`)
|
|
27
|
+
- ✅ Remains simple, unminified, and easy to maintain for future Bootstrap updates
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## 📦 Why This Version?
|
|
32
|
+
|
|
33
|
+
Most existing validation plugins either:
|
|
34
|
+
- require complex setups (FormValidation.io, Parsley.js), or
|
|
35
|
+
- dropped Bootstrap-specific integration entirely.
|
|
36
|
+
|
|
37
|
+
This version provides a **drop-in, backward-compatible** replacement for
|
|
38
|
+
developers still using Bootstrap’s form layout — now modernized and simplified.
|
|
39
|
+
|
|
40
|
+
It’s ideal for:
|
|
41
|
+
- legacy projects being upgraded from Bootstrap 3 → 5
|
|
42
|
+
- Laravel + Bootstrap form systems
|
|
43
|
+
- environments where simplicity and readability matter
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 🧰 Key Features
|
|
48
|
+
|
|
49
|
+
| Feature | Description |
|
|
50
|
+
|----------|-------------|
|
|
51
|
+
| 🎯 Full Bootstrap 5 support | Adds `.is-valid` / `.is-invalid` automatically |
|
|
52
|
+
| 🔁 Backward compatibility | Keeps `.has-error` / `.has-success` for old forms |
|
|
53
|
+
| 🧩 25+ validators built-in | Email, regex, dates, numbers, IP, MAC, etc. |
|
|
54
|
+
| 💡 Custom validators | Easily extend using `BootstrapValidator.validators.*` |
|
|
55
|
+
| ⚡ Live & server validation | Supports live input events and AJAX (`remote`) |
|
|
56
|
+
| 🧾 Plain, readable code | No build tools or minifiers required |
|
|
57
|
+
| 🛠️ Self-documented | In-file comments and Markdown manuals included |
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## 📘 Documentation
|
|
62
|
+
|
|
63
|
+
This repository includes:
|
|
64
|
+
|
|
65
|
+
- **bootstrapValidator.js** → The main hybrid plugin
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 🧱 Example Integration
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<form id="loginForm">
|
|
74
|
+
<div class="form-group row">
|
|
75
|
+
<label class="col-sm-3 col-form-label">Username</label>
|
|
76
|
+
<div class="col-sm-6">
|
|
77
|
+
<input type="text" class="form-control" name="username" placeholder="Username">
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="form-group row">
|
|
82
|
+
<label class="col-sm-3 col-form-label">Password</label>
|
|
83
|
+
<div class="col-sm-6">
|
|
84
|
+
<input type="password" class="form-control" name="password" placeholder="Password">
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<button type="submit" class="btn btn-primary">Login</button>
|
|
89
|
+
</form>
|
|
90
|
+
|
|
91
|
+
<script>
|
|
92
|
+
$('#loginForm').bootstrapValidator({
|
|
93
|
+
fields: {
|
|
94
|
+
username: {
|
|
95
|
+
validators: {
|
|
96
|
+
notEmpty: { message: 'Please insert username' }
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
password: {
|
|
100
|
+
validators: {
|
|
101
|
+
notEmpty: { message: 'Please insert password' }
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
</script>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
🧾 License
|
|
112
|
+
|
|
113
|
+
MIT License — the same as the original BootstrapValidator.
|
|
114
|
+
|
|
115
|
+
You are free to use, modify, and redistribute this plugin, provided that
|
|
116
|
+
the original attribution (Nguyen Huu Phuoc, 2014–2015) and this updated
|
|
117
|
+
version’s credits remain intact.
|
|
118
|
+
|
|
119
|
+
💬 Credits
|
|
120
|
+
|
|
121
|
+
Original author: Nguyen Huu Phuoc (@nghuuphuoc)
|
|
122
|
+
|
|
123
|
+
Hybrid rewrite & Bootstrap 5 update: [Your Name] (2025)
|
|
124
|
+
|
|
125
|
+
Based on BootstrapValidator v0.5.x source with modern compatibility patches
|
|
126
|
+
|
|
127
|
+
Note: This version is not affiliated with FormValidation.io — it’s an
|
|
128
|
+
independent, revived, open-source continuation for community use.
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
## 🔩 Common Configuration Options for Validators
|
|
132
|
+
|
|
133
|
+
| Option | Description | Example |
|
|
134
|
+
|---------|--------------|----------|
|
|
135
|
+
| `message` | Error message to display if validation fails | `'This field is required'` |
|
|
136
|
+
| `enabled` | Enable or disable a validator dynamically | `true` or `false` |
|
|
137
|
+
| `threshold` | Number of characters to wait before validating | `threshold: 5` |
|
|
138
|
+
| `trigger` | Validation event(s) (e.g., `keyup`, `blur`) | `'keyup'` or `'blur'` |
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## 🧱 Built-In Validators (Full List)
|
|
143
|
+
|
|
144
|
+
### 1️⃣ notEmpty
|
|
145
|
+
Ensures the field is not empty.
|
|
146
|
+
|
|
147
|
+
```js
|
|
148
|
+
notEmpty: {
|
|
149
|
+
message: 'This field is required'
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### 2️⃣ stringLength
|
|
154
|
+
Checks min and max character count.
|
|
155
|
+
|
|
156
|
+
```js
|
|
157
|
+
stringLength: {
|
|
158
|
+
min: 6,
|
|
159
|
+
max: 30,
|
|
160
|
+
message: 'Must be between 6 and 30 characters'
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### 3️⃣ regexp
|
|
165
|
+
Validates using a regular expression.
|
|
166
|
+
|
|
167
|
+
```js
|
|
168
|
+
regexp: {
|
|
169
|
+
regexp: /^[a-zA-Z0-9_]+$/,
|
|
170
|
+
message: 'Letters, numbers and underscores only'
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### 4️⃣ emailAddress
|
|
175
|
+
Validates email format.
|
|
176
|
+
|
|
177
|
+
```js
|
|
178
|
+
emailAddress: {
|
|
179
|
+
message: 'Invalid email address'
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### 5️⃣ identical
|
|
184
|
+
Matches another field’s value.
|
|
185
|
+
|
|
186
|
+
```js
|
|
187
|
+
identical: {
|
|
188
|
+
field: 'password',
|
|
189
|
+
message: 'Passwords must match'
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### 6️⃣ different
|
|
194
|
+
Ensures different value from another field.
|
|
195
|
+
|
|
196
|
+
```js
|
|
197
|
+
different: {
|
|
198
|
+
field: 'username',
|
|
199
|
+
message: 'Must not match username'
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### 7️⃣ digits
|
|
204
|
+
Digits only.
|
|
205
|
+
|
|
206
|
+
```js
|
|
207
|
+
digits: { message: 'Digits only' }
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### 8️⃣ integer
|
|
211
|
+
Valid integer (optional +/- sign).
|
|
212
|
+
|
|
213
|
+
```js
|
|
214
|
+
integer: { message: 'Enter a valid integer' }
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### 9️⃣ numeric
|
|
218
|
+
Allows integers or decimals.
|
|
219
|
+
|
|
220
|
+
```js
|
|
221
|
+
numeric: { message: 'Enter a valid number' }
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### 🔟 greaterThan
|
|
225
|
+
Greater than comparison.
|
|
226
|
+
|
|
227
|
+
```js
|
|
228
|
+
greaterThan: {
|
|
229
|
+
value: 18,
|
|
230
|
+
message: 'Must be 18 or older'
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### 11️⃣ lessThan
|
|
235
|
+
Less than comparison.
|
|
236
|
+
|
|
237
|
+
```js
|
|
238
|
+
lessThan: {
|
|
239
|
+
value: 100,
|
|
240
|
+
message: 'Must be less than or equal to 100'
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### 12️⃣ between
|
|
245
|
+
Range check.
|
|
246
|
+
|
|
247
|
+
```js
|
|
248
|
+
between: {
|
|
249
|
+
min: 1,
|
|
250
|
+
max: 10,
|
|
251
|
+
message: 'Between 1 and 10 only'
|
|
252
|
+
}
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
### 13️⃣ date
|
|
256
|
+
Checks valid date.
|
|
257
|
+
|
|
258
|
+
```js
|
|
259
|
+
date: {
|
|
260
|
+
format: 'YYYY-MM-DD',
|
|
261
|
+
message: 'Date is not valid'
|
|
262
|
+
}
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
### 14️⃣ creditCard
|
|
266
|
+
Validates credit card via Luhn algorithm.
|
|
267
|
+
|
|
268
|
+
```js
|
|
269
|
+
creditCard: { message: 'Invalid card number' }
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
### 15️⃣ phone
|
|
273
|
+
Phone number validation (country-based).
|
|
274
|
+
|
|
275
|
+
```js
|
|
276
|
+
phone: {
|
|
277
|
+
country: 'US',
|
|
278
|
+
message: 'Invalid phone number'
|
|
279
|
+
}
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
### 16️⃣ zipCode
|
|
283
|
+
Postal/ZIP validation.
|
|
284
|
+
|
|
285
|
+
```js
|
|
286
|
+
zipCode: {
|
|
287
|
+
country: 'US',
|
|
288
|
+
message: 'Invalid ZIP code'
|
|
289
|
+
}
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
### 17️⃣ choice
|
|
293
|
+
Checks min/max checkbox/radio selections.
|
|
294
|
+
|
|
295
|
+
```js
|
|
296
|
+
choice: {
|
|
297
|
+
min: 1,
|
|
298
|
+
max: 3,
|
|
299
|
+
message: 'Select between 1 and 3 options'
|
|
300
|
+
}
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### 18️⃣ remote
|
|
304
|
+
AJAX server validation.
|
|
305
|
+
|
|
306
|
+
```js
|
|
307
|
+
remote: {
|
|
308
|
+
url: '/api/check',
|
|
309
|
+
type: 'POST',
|
|
310
|
+
message: 'Invalid data'
|
|
311
|
+
}
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
### 19️⃣ callback
|
|
315
|
+
Custom JavaScript validation logic.
|
|
316
|
+
|
|
317
|
+
```js
|
|
318
|
+
callback: {
|
|
319
|
+
message: 'Custom validation failed',
|
|
320
|
+
callback: function(value) {
|
|
321
|
+
return value !== 'admin';
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
### 20️⃣ file
|
|
327
|
+
Validates file inputs (extension, type, size).
|
|
328
|
+
|
|
329
|
+
```js
|
|
330
|
+
file: {
|
|
331
|
+
extension: 'jpg,png',
|
|
332
|
+
type: 'image/jpeg,image/png',
|
|
333
|
+
maxSize: 2097152,
|
|
334
|
+
message: 'Only JPG/PNG files under 2MB'
|
|
335
|
+
}
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
### 21️⃣ uri
|
|
339
|
+
Validates URLs.
|
|
340
|
+
|
|
341
|
+
```js
|
|
342
|
+
uri: { message: 'Invalid URL' }
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
### 22️⃣ ip
|
|
346
|
+
Validates IPv4/IPv6.
|
|
347
|
+
|
|
348
|
+
```js
|
|
349
|
+
ip: { message: 'Invalid IP address' }
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
### 23️⃣ mac
|
|
353
|
+
Validates MAC address format.
|
|
354
|
+
|
|
355
|
+
```js
|
|
356
|
+
mac: { message: 'Invalid MAC address' }
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
### 24️⃣ hexColor
|
|
360
|
+
Validates hex color.
|
|
361
|
+
|
|
362
|
+
```js
|
|
363
|
+
hexColor: { message: 'Invalid hex color' }
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### 25️⃣ base64
|
|
367
|
+
Validates Base64 string.
|
|
368
|
+
|
|
369
|
+
```js
|
|
370
|
+
base64: { message: 'Invalid Base64 data' }
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
---
|
|
374
|
+
|
|
375
|
+
## 🧠 Custom Validator Example
|
|
376
|
+
|
|
377
|
+
```js
|
|
378
|
+
BootstrapValidator.validators.containsWord = {
|
|
379
|
+
validate: function(validator, $field, options) {
|
|
380
|
+
var value = $field.val();
|
|
381
|
+
return value && value.includes(options.word);
|
|
382
|
+
}
|
|
383
|
+
};
|
|
384
|
+
|
|
385
|
+
$('#form').bootstrapValidator({
|
|
386
|
+
fields: {
|
|
387
|
+
comment: {
|
|
388
|
+
validators: {
|
|
389
|
+
containsWord: {
|
|
390
|
+
word: 'Laravel',
|
|
391
|
+
message: 'Your comment must include "Laravel"'
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
---
|
|
400
|
+
|
|
401
|
+
## 🧾 Summary Table
|
|
402
|
+
|
|
403
|
+
| Validator | Description |
|
|
404
|
+
|------------|-------------|
|
|
405
|
+
| notEmpty | Field cannot be empty |
|
|
406
|
+
| stringLength | Validates length |
|
|
407
|
+
| regexp | Matches regex |
|
|
408
|
+
| emailAddress | Email format |
|
|
409
|
+
| identical | Match another field |
|
|
410
|
+
| different | Must differ from another field |
|
|
411
|
+
| digits | Digits only |
|
|
412
|
+
| integer | Integer only |
|
|
413
|
+
| numeric | Integer or decimal |
|
|
414
|
+
| greaterThan | Greater than comparison |
|
|
415
|
+
| lessThan | Less than comparison |
|
|
416
|
+
| between | Range check |
|
|
417
|
+
| date | Valid date |
|
|
418
|
+
| creditCard | Credit card number |
|
|
419
|
+
| phone | Phone number |
|
|
420
|
+
| zipCode | Postal code |
|
|
421
|
+
| choice | Checkbox/radio count |
|
|
422
|
+
| remote | AJAX validation |
|
|
423
|
+
| callback | Custom JS validation |
|
|
424
|
+
| file | File validation |
|
|
425
|
+
| uri | URL validation |
|
|
426
|
+
| ip | IP address |
|
|
427
|
+
| mac | MAC address |
|
|
428
|
+
| hexColor | Hex color |
|
|
429
|
+
| base64 | Base64 string |
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BootstrapValidator (http://bootstrapvalidator.com)
|
|
3
|
+
* The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
|
|
4
|
+
*
|
|
5
|
+
* @author http://twitter.com/nghuuphuoc
|
|
6
|
+
* @copyright (c) 2013 - 2014 Nguyen Huu Phuoc
|
|
7
|
+
* @license Commercial: http://bootstrapvalidator.com/license/
|
|
8
|
+
* Non-commercial: http://creativecommons.org/licenses/by-nc-nd/3.0/
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
.bv-form .help-block {
|
|
12
|
+
margin-bottom: 0;
|
|
13
|
+
}
|
|
14
|
+
.bv-form .tooltip-inner {
|
|
15
|
+
text-align: left;
|
|
16
|
+
}
|
|
17
|
+
.nav-tabs li.bv-tab-success > a {
|
|
18
|
+
color: #3c763d;
|
|
19
|
+
}
|
|
20
|
+
.nav-tabs li.bv-tab-error > a {
|
|
21
|
+
color: #a94442;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.bv-form .bv-icon-no-label {
|
|
25
|
+
top: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.bv-form .bv-icon-input-group {
|
|
29
|
+
top: 0;
|
|
30
|
+
z-index: 100;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.has-error, .has-error .form-control, .form-select .has-error, .form-select-lg .has-error, .form-select-sm .has-error, .form-check .has-error, .form-check-input .has-error, .form-switch .has-error, .form-check-label .has-error, .form-check-inline .has-error, .has-error .form-control-file, .has-error .form-control-lg, .has-error .form-control-sm, .has-error .form-control-range, .has-error .form-check-input, .has-error , .has-error label {
|
|
34
|
+
font-weight: bold;
|
|
35
|
+
color: #a94442;
|
|
36
|
+
border-color: #a94442;
|
|
37
|
+
}
|
|
38
|
+
.has-success, .has-success .form-control, .form-select .has-success, .form-select-lg .has-success, .form-select-sm .has-success, .form-check .has-success, .form-check-input .has-success, .form-switch .has-success, .form-check-label .has-success, .form-check-inline .has-success, .has-success .form-control-file, .has-success .form-control-lg, .has-success .form-control-sm, .has-success .form-control-range, .has-success .form-check-input, .has-success , .has-success label {
|
|
39
|
+
color: #3c763d;
|
|
40
|
+
border-color: #3c763d;
|
|
41
|
+
}
|