Skip to content

Commit 1555c41

Browse files
committed
all rules added from after rule 6
1 parent 231db6f commit 1555c41

File tree

7 files changed

+36609
-97
lines changed

7 files changed

+36609
-97
lines changed

README.md

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@
1515
- [Validate Pattern](#validate-pattern)
1616
- [Validate Phone Number](#validate-phone-number)
1717
- [Validate Number](#validate-number-input)
18+
- [Validate Integer](#validate-integer)
19+
- [Validate Float](#validate-float)
20+
- [Validate Date](#validate-date)
21+
- [Validate Time](#validate-time)
22+
- [Validate Url](#validate-URL)
23+
- [Validate Credit Card](#validate-credit-card)
1824
- [Example Reactjs Code](#example-reactjs-code)
1925
## Installation
2026

@@ -307,6 +313,7 @@ ValidateNumber: {
307313
},
308314
invalid: () => {
309315
console.log("Validation failed!");
316+
}
310317

311318
},
312319
```
@@ -328,6 +335,256 @@ ValidateNumber: {
328335
#### `invalid` (optional): A callback function to execute when validation fails.
329336

330337
#
338+
# Validate Integer
339+
340+
#### This is used for validating integer values of an input based on a set of defined rules.
341+
342+
```javascript
343+
ValidateInteger: {
344+
when: 'onblur', // or 'typing'
345+
input: 'age', // name of the input element to validate
346+
minValue: 0,
347+
maxValue: 100,
348+
uniqueValues: [10, 20, 30],
349+
positiveOnly: true,
350+
evenOnly: true,
351+
divisibleBy: 5,
352+
invalid: () => {
353+
console.log('Invalid input');
354+
},
355+
customErrorMessages: {
356+
notANumber: 'Please enter a number',
357+
notAnInteger: 'Please enter an integer',
358+
outOfRange: 'Please enter a value between 0 and 100',
359+
notUnique: 'Please enter a unique value',
360+
notPositive: 'Please enter a positive value',
361+
notEven: 'Please enter an even value',
362+
notDivisible: 'Please enter a value divisible by 5',
363+
},
364+
},
365+
```
366+
367+
* `when` **(required)**: A string indicating when to run the validation. Possible values are 'onblur' (validate on blur) and 'typing' (validate while typing).
368+
* `input`: **(required)** A string representing the name of the input element to validate.
369+
* `minValue` (optional): An integer representing the minimum value that the input element can have.
370+
* `maxValue` (optional): An integer representing the maximum value that the input element can have.
371+
* `uniqueValues` (optional): An array of integers representing values that should be unique.
372+
* `positiveOnly` (optional): A boolean indicating whether the input element can only have positive values.
373+
374+
* `evenOnly` (optional): A boolean indicating whether the input element can only have even values.
375+
* `divisibleBy` (optional): An integer representing a number by which the input element should be divisible.
376+
* `invalid` (optional): A function to call if the input element is invalid.
377+
* `customErrorMessages` (optional): An object containing custom error messages to display.
378+
379+
#
380+
# Validate Float
381+
382+
#### This function provides a method for validating float values.
383+
384+
```javascript
385+
ValidateFloat: {
386+
387+
when: 'onblur', // when to validate input - onblur or typing
388+
input: 'input-name', // name of input field to validate
389+
390+
required: true, // whether the input is required or not
391+
min: 0, // minimum value for input
392+
max: 100, // maximum value for input
393+
precision: 2, // maximum number of decimal places allowed
394+
customErrorMessages: {
395+
required: 'This field is required!',
396+
invalid: 'Please enter a valid number!',
397+
min: 'Please enter a number greater than or equal to {min}!',
398+
max: 'Please enter a number less than or equal to {max}!',
399+
precision: 'Please enter a number with at most {precision} decimal places!',
400+
},
401+
402+
},
403+
```
404+
405+
#
406+
# Validate Date
407+
408+
#### This function is used for validate date input
409+
410+
```javascript
411+
ValidateDate: {
412+
413+
when: 'typing', // required
414+
input: 'dob', // required
415+
416+
minDate: new Date('2000-01-01'),
417+
maxDate: new Date('2023-03-07'),
418+
allowOnlyBusinessDay: true,
419+
allowOnlyWeekend: false,
420+
customFormat: 'dd-MM-yyyy',
421+
timeZone: 'Asia/Kolkata',
422+
customErrorMessages: {
423+
invalidDate: 'Invalid date format. Please enter a valid date.',
424+
minDate: 'Date should not be earlier than 1st January 2000.',
425+
maxDate: 'Date should not be later than 7th March 2023.',
426+
businessDay: 'Selected date is not a business day.',
427+
notWeekend: 'Selected date is not a weekend.',
428+
invalidFormat: 'Date format is not valid. Please enter the date in dd-MM-yyyy format.',
429+
invalidTimeZone: 'Invalid time zone. Please enter a valid time zone.',
430+
}
431+
432+
}
433+
```
434+
435+
#### `when`
436+
The when rule determines when the validation should occur. It can be set to "typing" or "onblur".
437+
438+
#### `input`
439+
The input rule specifies the name of the input field to validate.
440+
441+
#### `minDate`
442+
The minDate rule specifies the minimum date that is allowed. Dates before this minimum date are considered invalid.
443+
444+
#### `maxDate`
445+
The maxDate rule specifies the maximum date that is allowed. Dates after this maximum date are considered invalid.
446+
447+
#### `allowOnlyBusinessDay`
448+
The allowOnlyBusinessDay rule determines whether or not only business days are allowed. Business days are weekdays (Monday to Friday).
449+
450+
#### `allowOnlyWeekend`
451+
The allowOnlyWeekend rule determines whether or not only weekends are allowed. Weekends are Saturday and Sunday.
452+
453+
#### `customFormat`
454+
The customFormat rule specifies the custom format for the date. If not specified, the date will be validated in the default format.
455+
456+
#### `timeZone`
457+
The timeZone rule specifies the time zone for the date. If not specified, the date will be validated in the local time zone.
458+
459+
#### `customErrorMessages`
460+
The customErrorMessages rule allows you to specify custom error messages for different validation rules. If not specified, default error messages will be used.
461+
462+
463+
#
464+
# Validate Time
465+
466+
#### This function is designed to validate time inputs according to the specified rules. It checks for valid time format, valid time range, valid timezone and whether the time falls within a specified interval.
467+
468+
```javascript
469+
ValidateTime: {
470+
471+
when: 'onblur', // required
472+
input: 'time-input', // required
473+
474+
customErrorMessages: {
475+
invalidFormat: 'Invalid time format, please enter time in the format HH:mm',
476+
invalidRange: 'Time is out of range, please enter a valid time',
477+
invalidInterval: 'Time is not within the specified interval, please enter a valid time',
478+
invalidTimezone: 'Invalid timezone, please enter a valid timezone',
479+
},
480+
timeRange: {
481+
startTime: '08:00',
482+
endTime: '17:00',
483+
},
484+
timeInterval: {
485+
startInterval: 480,
486+
endInterval: 1020,
487+
},
488+
timezone: 'America/New_York'
489+
490+
}
491+
```
492+
493+
* `when` : A string value that specifies when to perform the validation. It can be either 'typing' or 'onblur'.
494+
* `input` : A string value that specifies the name of the input element to validate.
495+
* `customErrorMessages` : An object that specifies custom error messages to use for the validation.
496+
497+
* `timeRange` : An object that specifies a time range that the input value should fall within.
498+
* `timeInterval` : An object that specifies an interval that the input value should fall within.
499+
* `timezone` : A string value that specifies the timezone to use for the validation. If not specified, the local timezone is used.
500+
501+
#
502+
# Validate URL
503+
504+
#### This function validates the URL. It checks the URL for well-formedness, protocol validity, domain validity, IP address validity, accessibility, and invalid characters.
505+
506+
```javascript
507+
508+
ValidateUrl: {
509+
510+
when: "typing", // required
511+
input: "urlInput", // required
512+
513+
CustomErrorMessages: {
514+
invalidUrl: "Invalid URL",
515+
invalidProtocol: "Invalid Protocol",
516+
invalidDomain: "Invalid Domain",
517+
invalidIpAddress: "Invalid IP Address",
518+
inaccessibleUrl: "Inaccessible URL",
519+
invalidCharacters: "Invalid Characters",
520+
protocolNotAllowed: "Protocol not allowed",
521+
},
522+
checkUrl: true,
523+
checkProtocol: true,
524+
checkDomain: true,
525+
checkIpAddress: true,
526+
checkInAccessibleUrl: true,
527+
checkCharacters: true,
528+
protocols: ["https", "http"],
529+
530+
},
531+
532+
```
533+
534+
* `when`: When to validate the URL input. This can be either "typing" or "onblur".
535+
* `input`: The name of the input field to validate.
536+
* `CustomErrorMessages`: Custom error messages for each type of validation error. This is an optional property.
537+
* `checkUrl`: Whether to check the URL for well-formedness.
538+
* `checkProtocol`: Whether to check the protocol of the URL.
539+
* `checkDomain`: Whether to check the domain name of the URL.
540+
* `checkIpAddress`: Whether to check the IP address of the URL.
541+
* `checkInAccessibleUrl`: Whether to check if the URL is accessible.
542+
* `checkCharacters`: Whether to check for invalid characters in the URL.
543+
544+
* `protocols`: An array of allowed protocols. This is used when checkProtocol is set to true. If this property is not specified, any protocol is allowed.
545+
546+
547+
#
548+
# Validate Credit Card
549+
550+
#### This function that can be used to validate credit card information
551+
552+
```javascript
553+
554+
ValidateCreditCard: {
555+
556+
when: "typing", // required
557+
cardNumber: "card-input", // required
558+
559+
allowedCards: ["Visa", "Mastercard"],
560+
expirationDate: "expiration-date",
561+
cvv: "cvv",
562+
billingZip: "billing-zip",
563+
customErrorMessages: {
564+
invalidCardNumber: "Invalid credit card number",
565+
onlyAllowedCards: "Only Visa and Mastercard are allowed",
566+
invalidExpirationDate: "Invalid expiration date",
567+
invalidCVV: "Invalid CVV code",
568+
invalidBillingZip: "Invalid billing zip code",
569+
},
570+
getCardType: (cardType) => console.log(cardType); // Visa
571+
572+
}
573+
574+
```
575+
576+
* `when` - When to validate. This can be either "typing" or "onblur".
577+
* `allowedCards` - An optional array of strings that contains the card types that are allowed. If this property is not set, all card types are allowed.
578+
* `cardNumber` - A string that contains the name of the input element that contains the credit card number.
579+
* `expirationDate` - A string that contains the name of the input element that contains the expiration date.
580+
* `cvv` - A string that contains the name of the input element that contains the CVV code.
581+
* `billingZip` - A string that contains the name of the input element that contains the billing zip code.
582+
583+
* `customErrorMessages` - An optional object that contains custom error messages for each validation rule. The keys should match the validation function names, and the values should be strings that represent the error message.
584+
* `getCardType` - An optional function that can be used to determine the card type based on the credit card number.
585+
586+
587+
331588
# Example Reactjs Code
332589

333590
Here is an example of how to use the library in a ReactJS component:
@@ -376,6 +633,11 @@ export default App;
376633

377634

378635
```
636+
## Thanks to Contributors
637+
638+
639+
![hero](https://i.postimg.cc/CMtCrcH1/contributors-removebg-preview-1.png)
640+
379641
## License
380642

381643
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/arshad-yaseen/form-validation-react/blob/main/LICENCE)

0 commit comments

Comments
 (0)