@jdlien/validator 1.0.3 → 1.0.4
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/README.md +46 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Validator
|
|
1
|
+
# Validator - HTML Form Validation Made Easy
|
|
2
2
|
|
|
3
3
|
## Introduction
|
|
4
4
|
|
|
@@ -162,7 +162,7 @@ You can customize the class(es) that Validator uses to hide the error messages b
|
|
|
162
162
|
|
|
163
163
|
## Color Picker Support
|
|
164
164
|
|
|
165
|
-
If you need to allow a user to pick a color, you can use data-type="color" and the input will be required to be any valid CSS color supported by the browser. This type can also work in conjunction with a native color input. If you do this, you will need to add an input with the name of the data-color input + `-color
|
|
165
|
+
If you need to allow a user to pick a color, you can use data-type="color" and the input will be required to be any valid CSS color supported by the browser. This type can also work in conjunction with a native color input. If you do this, you will need to add an input with `type="color"` and the name of the data-color input + `-color`. This should be inside a linked label which will become the color preview swatch. Such a label should have an ID of the color input's name + `-color-label` so that Validator can change the background to the specified color.
|
|
166
166
|
|
|
167
167
|
A basic example that would work:
|
|
168
168
|
|
|
@@ -241,6 +241,49 @@ const myValidator = new Validator(myForm, {
|
|
|
241
241
|
})
|
|
242
242
|
```
|
|
243
243
|
|
|
244
|
+
## Utility Functions
|
|
245
|
+
|
|
246
|
+
Validator includes several utility functions that may be useful in your own code, so they are exported as part of the module.
|
|
247
|
+
If you wish to use these, you may import the functions directly from the module as an object that contains all the functions:
|
|
248
|
+
|
|
249
|
+
```javascript
|
|
250
|
+
import { validatorUtils } from '@jdlien/validator'
|
|
251
|
+
// you could assign the functions you need to more convenient variables
|
|
252
|
+
const { dateFormat, formatDateTime } = validatorUtils
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
Here is a list of the utility functions:
|
|
256
|
+
|
|
257
|
+
- **isFormControl**: Determines if an element is an HTML input, select, or textarea element.
|
|
258
|
+
- **isType**: Checks if an element has a type or data-type attribute matching one of the passed values.
|
|
259
|
+
- **momentToFPFormat**: Converts a moment.js-style format string to the flatpickr format.
|
|
260
|
+
- **monthToNumber**: Converts month string or number to a zero-based month number (January == 0).
|
|
261
|
+
- **yearToFull**: Converts a year string or number to a 4-digit year.
|
|
262
|
+
- **parseDate**: Parses a date string or Date object into a Date object.
|
|
263
|
+
- **parseTime**: Parses a time string into an object with hour, minute, and second properties.
|
|
264
|
+
- **parseTimeToString**: Parses a time string into a formatted string.
|
|
265
|
+
- **formatDateTime**: Formats a date string or Date object into a string with a specified format.
|
|
266
|
+
- **parseDateToString**: Parses a date string or Date object into a formatted string with the specified moment.js-style date format.
|
|
267
|
+
- **isDate**: Determines if a value is a valid date.
|
|
268
|
+
- **isDateInRange**: Determines if a date falls within a specified range (either past or future).
|
|
269
|
+
- **isTime**: Determines if a value is a valid time.
|
|
270
|
+
- **isEmail**: Determines if a value is a valid email address.
|
|
271
|
+
- **parseNANPTel**: Parses a North American phone number string into a standardized format.
|
|
272
|
+
- **isNANPTel**: Determines if a value is a valid North American phone number.
|
|
273
|
+
- **parseInteger**: Parses an integer string into a standardized format.
|
|
274
|
+
- **isNumber**: Determines if a value is a valid number.
|
|
275
|
+
- **parseNumber**: Parses a number string into a standardized format.
|
|
276
|
+
- **isInteger**: Determines if a value is a valid integer.
|
|
277
|
+
- **parseUrl**: Parses a URL string into a standardized format.
|
|
278
|
+
- **isUrl**: Determines if a value is a valid URL.
|
|
279
|
+
- **parseZip**: Parses a zip code string into a standardized format.
|
|
280
|
+
- **isZip**: Determines if a value is a valid zip code.
|
|
281
|
+
- **parsePostalCA**: Parses a Canadian postal code string into a standardized format.
|
|
282
|
+
- **isPostalCA**: Determines if a value is a valid Canadian postal code.
|
|
283
|
+
- **isColor**: Determines if a value is a valid color.
|
|
284
|
+
- **parseColor**: Parses a color string into a standardized format.
|
|
285
|
+
- **normalizeValidationResult**: Normalizes a validation result (like a boolean or string) into an object with a valid property and a messages array of strings.
|
|
286
|
+
|
|
244
287
|
## Contributing
|
|
245
288
|
|
|
246
289
|
Install dev dependencies:
|
|
@@ -249,7 +292,7 @@ Install dev dependencies:
|
|
|
249
292
|
npm install
|
|
250
293
|
```
|
|
251
294
|
|
|
252
|
-
|
|
295
|
+
When running Vite you may get an error like
|
|
253
296
|
|
|
254
297
|
```
|
|
255
298
|
Module did not self-register: '...\node_modules\canvas\build\Release\canvas.node'
|