{"id":18050148,"url":"https://github.com/arshad-yaseen/form-validation-react","last_synced_at":"2025-04-10T12:42:45.609Z","repository":{"id":92228648,"uuid":"607692120","full_name":"arshad-yaseen/form-validation-react","owner":"arshad-yaseen","description":"form-validation-react is an easy-to-use npm library that enables developers to add validation rules to form inputs in React. It supports required fields, email formats, and custom rules with various validation functions and options that can be tailored to specific needs.","archived":false,"fork":false,"pushed_at":"2023-08-30T05:45:53.000Z","size":118173,"stargazers_count":3,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T12:35:01.183Z","etag":null,"topics":["form-validation-react","form-validator","npm","npm-package","react-form-validation","react-form-validator","reactjs","validate-form"],"latest_commit_sha":null,"homepage":"https://reactvalidator.tech","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arshad-yaseen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-28T13:43:50.000Z","updated_at":"2024-07-09T09:48:00.000Z","dependencies_parsed_at":"2023-09-23T10:44:49.377Z","dependency_job_id":"aa5d98cd-3193-4af9-8410-dc3115059713","html_url":"https://github.com/arshad-yaseen/form-validation-react","commit_stats":{"total_commits":110,"total_committers":3,"mean_commits":"36.666666666666664","dds":"0.018181818181818188","last_synced_commit":"0e7a9b6be5dcae6fa12f4c0c7bde58533355b0fc"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arshad-yaseen%2Fform-validation-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arshad-yaseen%2Fform-validation-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arshad-yaseen%2Fform-validation-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arshad-yaseen%2Fform-validation-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arshad-yaseen","download_url":"https://codeload.github.com/arshad-yaseen/form-validation-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217160,"owners_count":21066634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-validation-react","form-validator","npm","npm-package","react-form-validation","react-form-validator","reactjs","validate-form"],"created_at":"2024-10-30T21:10:46.534Z","updated_at":"2025-04-10T12:42:45.592Z","avatar_url":"https://github.com/arshad-yaseen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![hero](https://i.postimg.cc/qvrfZj93/Twitter-header-1-page-0001-3.jpg)\n\n\n### form-validation-react is an easy-to-use npm library that enables developers to add validation rules to form inputs in React. It supports required fields, email formats, and custom rules with various validation functions and options that can be tailored to specific needs.\n\nCheck this website - [reactvalidator.tech](https://reactvalidator.tech/)\n\n# Table of Contents\n- [Installation](#installation)\n\n- [Usage](#usage)\n\n- [Validate Required Inputs](#validate-required-inputs) → [Demo](https://reactvalidator.tech/rules/validate-required)\n\n- [Validate Min \u0026 Max](#validate-min-and-max) → [Demo](https://reactvalidator.tech/rules/validate-min-max)\n\n- [Validate Email](#validate-email) → [Demo](https://reactvalidator.tech/rules/validate-email)\n\n- [Validate Pattern](#validate-pattern) → [Demo](https://reactvalidator.tech/rules/validate-patterns)\n\n- [Validate Phone Number](#validate-phone-number) → [Demo](https://reactvalidator.tech/rules/validate-phone-number)\n\n- [Validate Number](#validate-number-input) → [Demo](https://reactvalidator.tech/rules/validate-number)\n\n- [Validate Integer](#validate-integer) → [Demo](https://reactvalidator.tech/rules/validate-integer)\n\n- [Validate Float](#validate-float) → [Demo](https://reactvalidator.tech/rules/validate-float)\n\n- [Validate Date](#validate-date) → [Demo](https://reactvalidator.tech/rules/validate-date)\n\n- [Validate Time](#validate-time) → [Demo](https://reactvalidator.tech/rules/validate-time)\n\n- [Validate Url](#validate-URL) → [Demo](https://reactvalidator.tech/rules/validate-url)\n\n- [Validate Credit Card](#validate-credit-card) → [Demo](https://reactvalidator.tech/rules/validate-credit-card)\n\n- [Example Reactjs Code](#example-reactjs-code)\n## Installation \n\nYou can install the package using npm or yarn:\n\n```bash\n  npm i form-validation-react\n\n```\n\n```bash\n  yarn add form-validation-react\n\n```\n\n## Usage\nTo use the library, import it in your React component:\n\n```javascript\n  import ValidateForm from \"form-validation-react\"\n\n```\n\n\nThen, wrap your form with \u003cValidateForm\u003e :\n\n```javascript\n\u003cValidateForm\n  onSubmit={(event)=\u003e {\n    console.log(\"Form submitted\",event);\n  }}\n  errorElement=\"#error_show_element\" // optional\n  rules={{\n      // add the rules here\n  }}\n\u003e\n\n  \u003cform\u003e\n    \u003ch1 id=\"error_show_element\" \u003e // The error message will appear in this element \u003c/h1\u003e\n    \u003cinput type=\"text\" required /\u003e\n  \u003c/form\u003e\n\n\u003c/ValidateForm\u003e\n\n```\n#### `onSubmit`: This function executes when click on submit button with no validation errors. If you not call this function the form will submit when no validation errors\n\n# Rules\n# Validate Required Inputs\n\n#### To check if all required input fields are filled, use the following rule:\n\n```javascript\nvalidateRequired: {\n\n  action: \"show_error_message\",\n  message: \"fill all required fields\",\n  applyOnly:[\"name\",\"password\"] // checking only this inputs are filled\n  notvalidated: (notFilledInputs) =\u003e {\n  console.log(\"Not filled required inputs\",notFilledInputs);\n  }\n  onsuccess:()=\u003e {\n    console.log(\"All required fields are filled\");\n  }\n\n}\n\n```\n\nIf a required input is not filled, the rule will return a callback with an array of the not-filled inputs. You can add the action `input_red_border` to change the border color of the not-filled inputs to red.\n\n\n| Key | Type | Parameter | Optional |\n| --- | --- | --- | --- |\n| `action` | `string` | `input_red_border`,`show_error_message`,`both` | `no` |\n| `message` | `string` | Message | `yes` |\n| `applyOnly` | `array\t` | **Name** of the inputs | `yes` |\n| `notvalidated` | `callback function` | notFilledInputs | `yes` | \n| `onsuccess` | `callback function` | no params | `yes` | \n\n\n# \n# Validate Min and Max\n\n#### Checking all **Min** and **Max** values of a form inputs and returning a callback and show error.\n\n#### **Note:** This rule is not work with type `password`. because password input is not readable or writable for security reasons. work only with `text`,`number` type\n\n```javascript\nValidateMinMax: {\n\n    when: \"typing\"\n    message : {\n        min: \"Full name must be at least 4 characters\",\n        max: \"Full name must be at most 8 characters\"\n    },\n    exceedsMax: ()=\u003e {\n        console.log(\"Maximum length exceeded\");\n    },\n    exceedsMin: ()=\u003e {\n        console.log(\"Minimum length exceeded\");\n    }\n    onsuccess:(validatedInput)=\u003e {\n        console.log(\"Length is in range of :\",validatedInput);\n    }\n\n}\n\n\n```\n\n```html\n \u003cinput min={4} max={8} type=\"number\" required /\u003e\n\n```\n\nthe `min` in message object is when exceeded minimum the message will show.\n\nthe `max` in message object is when exceeded maximum the message will show\n\n\n| Key | Type | Parameter | Optional |\n| --- | --- | --- | --- |\n| `when` | `string\t` | `typing`,`onblur` | `no` |\n| `message` | `object\t` | Messages | `yes` |\n| `exceedsMax` | `callback function` | when exceeded max | `yes` |\n| `exceedsMin` | `callback function` | when exceeded min | `yes` |\n| `onsuccess` | `callback function` | validatedInput | `yes` |\n\n# \n# Validate Email\n\n#### This is used to validate email addresses based on pre-defined patterns. It takes input from a form and checks it against a regular expression pattern\n\n```javascript\nValidateEmail: {\n\n    type: \"yahoo\",\n    emailInput: \"my_email\",\n    message: \"Please enter a valid yahoo email\",\n    onsuccess: () =\u003e console.log(\"Email is valid\"),\n    invalid: () =\u003e console.log(\"Email is invalid\"),\n    when: \"onblur\",\n\n}\n```\n\n```html\n\u003cinput name=\"my_email\" type=\"email\" required /\u003e\n```\n\n## Parameters\n\n#### `type:` a string representing the type of email being validated (personal, business, yahoo, gmail, hotmail, aol, isp, education, government, nonprofit, international, domain-specific, or alias)\n#### `emailInput:` a string representing the name of the input element in the form that contains the email address\n#### `message:` a string representing the error message to be displayed if the email is invalid\n#### `onsuccess:` a callback function to be executed if the email is valid\n#### `invalid:` a callback function to be executed if the email is invalid\n#### `when:` a string specifying when the validation should occur (onblur or typing)\n#\n# Validate Pattern\n\n#### This function is used to validate input fields against a specific pattern, such as a regular expression or a wildcard pattern.\n\n\n```javascript\nValidatePattern:{\n\n\tinput: 'email',\n  \tpattern: /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/,\n  \ttype: 'regex',\n  \twhen: 'typing',\n  \tallowEmpty: false,\n  \tonsuccess: (inputElement) =\u003e console.log('Validation succeeded!’),\n  \tinvalid: () =\u003e console.log('Validation failed!’),\n  \terrorMessage: 'Please enter a valid email address.'\n\n}\n```\n\n#### Validate using a regular expression pattern\n\n```javascript\nValidatePattern:{\n\tpattern: /^\\S+@\\S+\\.\\S+$/,\n  \tmodifiers: 'i',\n    input: 'email',\n  \ttype: 'regex',\n  \twhen: 'typing',\n  \terrorMessage: 'Please enter a valid email address',\n}\n```\n\n#### Validate using a wildcard pattern\n\n```javascript\nValidatePattern:{\n\tpattern: '*.com',\n  \ttype: 'wildcard',\n  \tmodifiers: 'i',\n    input: 'email-input',\n  \twhen: 'typing',\n  \terrorMessage: 'Please enter an email address ending in .com'\n}\n```\n\n#### Allow empty input\n\n```javascript\nValidatePattern:{\n\tpattern: /^\\S+@\\S+\\.\\S+$/,\n  \tmodifiers: 'i',\n    input: 'email',\n  \ttype: 'regex',\n  \twhen: 'typing',\n  \tallowEmpty: true,\n}\n```\n\n## Parameters\n\n* #### `input` (required): The name of the input field to validate.\n* #### `pattern` (required): A string representing the pattern to validate against. It can be a regular expression or a wildcard pattern.\n* #### `type` (required): A string representing the type of pattern used. It can be either `\"regex\"` or `\"wildcard\"`.\n* #### `modifiers` (optional): A string representing the modifiers for the regular expression. Only used when `type` is `\"regex\"`.\n* #### `when` (optional): A string representing the event that triggers the validation. It can be either `\"onblur\"` or `\"typing\"`. If not specified, `\"onblur\"` is used by default.\n* #### `allowEmpty` (optional): A boolean value indicating whether empty input should be considered valid. If not specified, `false` is used by default.\n* #### `onsuccess` (optional): A function that is called when the validation succeeds.\n* #### `invalid` (optional): A function that is called when the validation fails.\n* #### `errorMessage` (optional): A string representing the error message to display when the validation fails.\n\n\nWe provide two different patterns - a regular expression pattern and a wildcard pattern - along with options for case-insensitivity (`modifiers: 'i'`) and custom error messages.\n\nWe also use the `allowEmpty` option to allow the input to be empty, which can be useful for optional fields.\n\n# \n# Validate Phone Number\n\n#### A function that validates a phone number input field based on specified country.\n\n```javascript\nValidatePhone: {\n\n    phoneInput: 'phone_input', // required\n    countryCode: 'US', // required\n    when: 'onblur', // required\n    \n    onsuccess: (input) =\u003e console.log(`${input.value} is a valid phone number`),\n    invalid: () =\u003e console.log('Invalid phone number'),\n    message: 'Please enter a valid US phone number',\n    isLandlineNumber: (isLandline) =\u003e console.log(`Is a landline: ${isLandline}`),\n    isMobileNumber: (isMobile) =\u003e console.log(`Is a mobile: ${isMobile}`)\n\n}\n```\n\n```html\n\u003cinput type=\"number\" name=\"phone_input\" /\u003e\n```\n\n #### `phoneInput`: the name of the input field to validate.\n #### `countryCode`: an optional country code to use in the validation process.\n #### `when`: the event to trigger the validation process. Can be set to either \"onblur\" or \"typing\".\n #### `onsuccess`: a function to execute when the validation is successful.\n #### `invalid`: a function to execute when the validation is unsuccessful.\n #### `message`: an error message to display when the validation is unsuccessful.\n #### `isLandlineNumber`: a function that receives a boolean value indicating if the input is a landline number.\n #### `isMobileNumber`: a function that receives a boolean value indicating if the input is a mobile number.\n\n# \n# Validate Number Input\n\n#### This is a function to validate numbers input. This function can validate a number within a specified range, with a specified number of decimal places, and check whether it's an integer. This function also supports negative numbers and numbers in a specific base.\n\n```javascript\nValidateNumber: {\n\n    input: \"my-number-input\", // required\n    when: \"typing\", // required\n\n    min: 0,\n    max: 100,\n    decimalPlaces: 2,\n    allowNegative: false,\n    integersOnly: false,\n    base: 10,\n    customErrorMessages: {\n      invalidNumber: \"Invalid number\",\n      range: \"Number must be between 0 and 100\",\n      decimalPlaces: \"Number must have no more than 2 decimal places\",\n      negative: \"Negative numbers are not allowed\",\n      integersOnly: \"Only integers are allowed\",\n      base: \"Number must be in base 10\",\n    },\n    onsuccess: () =\u003e {\n      console.log(\"Validation succeeded!\");\n    },\n    invalid: () =\u003e {\n      console.log(\"Validation failed!\");\n    }\n\n},\n```\n\n```html\n\u003cinput type=\"number\" name=\"my-number-input\" /\u003e\n```\n\n #### `min` (optional): The minimum value of the number.\n #### `max` (optional): The maximum value of the number.\n #### `input`: The name of the input field to validate.\n #### `when`: The timing of the validation. Valid values are \"onblur\" and \"typing\".\n #### `decimalPlaces` (optional): The number of decimal places\n #### `allowNegative` (optional): A boolean value indicating whether negative numbers are allowed. Defaults to true.\n #### `integersOnly` (optional): A boolean value indicating whether the number must be an integer. Defaults to false.\n #### `base` (optional): The base of the number.\n #### `customErrorMessages` (optional): An object containing custom error messages. Valid properties are invalidNumber, range, decimalPlaces, negative, integersOnly, and base.\n #### `onsuccess` (optional): A callback function to execute when validation succeeds.\n #### `invalid` (optional): A callback function to execute when validation fails.\n\n# \n# Validate Integer\n\n#### This is used for validating integer values of an input based on a set of defined rules.\n\n```javascript\nValidateInteger: {\n    when: 'onblur', // or 'typing'\n    input: 'age', // name of the input element to validate\n    minValue: 0,\n    maxValue: 100,\n    uniqueValues: [10, 20, 30],\n    positiveOnly: true,\n    evenOnly: true,\n    divisibleBy: 5,\n    invalid: () =\u003e {\n      console.log('Invalid input');\n    },\n    customErrorMessages: {\n      notANumber: 'Please enter a number',\n      notAnInteger: 'Please enter an integer',\n      outOfRange: 'Please enter a value between 0 and 100',\n      notUnique: 'Please enter a unique value',\n      notPositive: 'Please enter a positive value',\n      notEven: 'Please enter an even value',\n      notDivisible: 'Please enter a value divisible by 5',\n    },\n  },\n```\n\n* `when` **(required)**: A string indicating when to run the validation. Possible values are 'onblur' (validate on blur) and 'typing' (validate while typing).\n* `input`: **(required)** A string representing the name of the input element to validate.\n* `minValue` (optional): An integer representing the minimum value that the input element can have.\n* `maxValue` (optional): An integer representing the maximum value that the input element can have. \n* `uniqueValues` (optional): An array of integers representing values that should be unique.\n* `positiveOnly` (optional): A boolean indicating whether the input element can only have positive values.\n\n* `evenOnly` (optional): A boolean indicating whether the input element can only have even values.\n* `divisibleBy` (optional): An integer representing a number by which the input element should be divisible.\n* `invalid` (optional): A function to call if the input element is invalid.\n* `customErrorMessages` (optional): An object containing custom error messages to display.\n\n#\n# Validate Float\n\n#### This function provides a method for validating float values.\n\n```javascript\nValidateFloat: {\n\n    when: 'onblur', // when to validate input - onblur or typing\n    input: 'input-name', // name of input field to validate\n\n    required: true, // whether the input is required or not\n    min: 0, // minimum value for input\n    max: 100, // maximum value for input\n    precision: 2, // maximum number of decimal places allowed\n    customErrorMessages: {\n      required: 'This field is required!',\n      invalid: 'Please enter a valid number!',\n      min: 'Please enter a number greater than or equal to {min}!',\n      max: 'Please enter a number less than or equal to {max}!',\n      precision: 'Please enter a number with at most {precision} decimal places!',\n    },\n    \n},\n```\n\n#\n# Validate Date\n\n#### This function is used for validate date input\n\n```javascript\nValidateDate: {\n\n    when: 'typing', // required\n    input: 'dob', // required\n\n    minDate: new Date('2000-01-01'),\n    maxDate: new Date('2023-03-07'),\n    allowOnlyBusinessDay: true,\n    allowOnlyWeekend: false,\n    customFormat: 'dd-MM-yyyy',\n    timeZone: 'Asia/Kolkata',\n    customErrorMessages: {\n      invalidDate: 'Invalid date format. Please enter a valid date.',\n      minDate: 'Date should not be earlier than 1st January 2000.',\n      maxDate: 'Date should not be later than 7th March 2023.',\n      businessDay: 'Selected date is not a business day.',\n      notWeekend: 'Selected date is not a weekend.',\n      invalidFormat: 'Date format is not valid. Please enter the date in dd-MM-yyyy format.',\n      invalidTimeZone: 'Invalid time zone. Please enter a valid time zone.',\n    }\n\n  }\n```\n\n#### `when`\nThe when rule determines when the validation should occur. It can be set to \"typing\" or \"onblur\".\n\n#### `input`\nThe input rule specifies the name of the input field to validate.\n\n#### `minDate`\nThe minDate rule specifies the minimum date that is allowed. Dates before this minimum date are considered invalid.\n\n#### `maxDate`\nThe maxDate rule specifies the maximum date that is allowed. Dates after this maximum date are considered invalid.\n\n#### `allowOnlyBusinessDay`\nThe allowOnlyBusinessDay rule determines whether or not only business days are allowed. Business days are weekdays (Monday to Friday).\n\n#### `allowOnlyWeekend`\nThe allowOnlyWeekend rule determines whether or not only weekends are allowed. Weekends are Saturday and Sunday.\n\n#### `customFormat`\nThe customFormat rule specifies the custom format for the date. If not specified, the date will be validated in the default format.\n\n#### `timeZone`\nThe timeZone rule specifies the time zone for the date. If not specified, the date will be validated in the local time zone.\n\n#### `customErrorMessages`\nThe customErrorMessages rule allows you to specify custom error messages for different validation rules. If not specified, default error messages will be used.\n\n\n#\n# Validate Time\n\n#### 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.\n\n```javascript\nValidateTime: {\n\n  when: 'onblur', // required\n  input: 'time-input', // required\n\n  customErrorMessages: {\n    invalidFormat: 'Invalid time format, please enter time in the format HH:mm',\n    invalidRange: 'Time is out of range, please enter a valid time',\n    invalidInterval: 'Time is not within the specified interval, please enter a valid time',\n    invalidTimezone: 'Invalid timezone, please enter a valid timezone',\n  },\n  timeRange: {\n    startTime: '08:00',\n    endTime: '17:00',\n  },\n  timeInterval: {\n    startInterval: 480,\n    endInterval: 1020,\n  },\n  timezone: 'America/New_York'\n\n}\n```\n\n* `when` : A string value that specifies when to perform the validation. It can be either 'typing' or 'onblur'.\n* `input` : A string value that specifies the name of the input element to validate.\n* `customErrorMessages` : An object that specifies custom error messages to use for the validation.\n\n* `timeRange` : An object that specifies a time range that the input value should fall within.\n* `timeInterval` : An object that specifies an interval that the input value should fall within.\n* `timezone` : A string value that specifies the timezone to use for the validation. If not specified, the local timezone is used.\n\n# \n# Validate URL\n\n#### This function validates the URL. It checks the URL for well-formedness, protocol validity, domain validity, IP address validity, accessibility, and invalid characters.\n\n```javascript\n\nValidateUrl: {\n\n    when: \"typing\", // required \n    input: \"urlInput\", // required \n    \n    CustomErrorMessages: {\n      invalidUrl: \"Invalid URL\",\n      invalidProtocol: \"Invalid Protocol\",\n      invalidDomain: \"Invalid Domain\",\n      invalidIpAddress: \"Invalid IP Address\",\n      inaccessibleUrl: \"Inaccessible URL\",\n      invalidCharacters: \"Invalid Characters\",\n      protocolNotAllowed: \"Protocol not allowed\",\n    },\n    checkUrl: true,\n    checkProtocol: true,\n    checkDomain: true,\n    checkIpAddress: true,\n    checkInAccessibleUrl: true,\n    checkCharacters: true,\n    protocols: [\"https\", \"http\"],\n\n  },\n\n```\n\n* `when`: When to validate the URL input. This can be either \"typing\" or \"onblur\".\n* `input`: The name of the input field to validate.\n* `CustomErrorMessages`: Custom error messages for each type of validation error. This is an optional property.\n* `checkUrl`: Whether to check the URL for well-formedness.\n* `checkProtocol`: Whether to check the protocol of the URL.\n* `checkDomain`: Whether to check the domain name of the URL.\n* `checkIpAddress`: Whether to check the IP address of the URL.\n* `checkInAccessibleUrl`: Whether to check if the URL is accessible.\n* `checkCharacters`: Whether to check for invalid characters in the URL.\n\n* `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.\n\n\n# \n# Validate Credit Card\n\n#### This function that can be used to validate credit card information\n\n```javascript\n\nValidateCreditCard: {\n\n    when: \"typing\", // required\n    cardNumber: \"card-input\", // required\n\n    allowedCards: [\"Visa\", \"Mastercard\"],\n    expirationDate: \"expiration-date\",\n    cvv: \"cvv\",\n    billingZip: \"billing-zip\",\n    customErrorMessages: {\n      invalidCardNumber: \"Invalid credit card number\",\n      onlyAllowedCards: \"Only Visa and Mastercard are allowed\",\n      invalidExpirationDate: \"Invalid expiration date\",\n      invalidCVV: \"Invalid CVV code\",\n      invalidBillingZip: \"Invalid billing zip code\",\n    },\n    getCardType: (cardType) =\u003e console.log(cardType); // Visa\n\n  }\n\n```\n\n* `when` - When to validate. This can be either \"typing\" or \"onblur\".\n* `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.\n* `cardNumber` - A string that contains the name of the input element that contains the credit card number.\n* `expirationDate` - A string that contains the name of the input element that contains the expiration date.\n* `cvv` - A string that contains the name of the input element that contains the CVV code.\n* `billingZip` - A string that contains the name of the input element that contains the billing zip code.\n\n* `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.\n* `getCardType` - An optional function that can be used to determine the card type based on the credit card number.\n\n\n\n# Example Reactjs Code\n\nHere is an example of how to use the library in a ReactJS component:\n\n```javascript\nimport React from \"react\";\nimport ValidateForm from \"form-validation-react\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n\n      \u003cValidateForm\n        rules={{\n\n          validateRequired: {\n            action: \"input_red_border\",\n            notvalidated: (notFilledInputs) =\u003e {\n              console.log(\"Not filled required inputs\", notFilledInputs);\n            }\n          },\n\n          ValidateMinMax: {\n            when: \"onblur\"\n            message : {\n                min: \"Full name must be at least 4 characters\",\n                max: \"Full name must be at most 8 characters\"\n            }\n          }\n\n        }}\n      \u003e\n        \u003cform\u003e\n          \u003cinput min={4} max={8} type=\"text\" name=\"full_name\" required /\u003e\n          \u003cinput required type=\"text\" name=\"full_name\" /\u003e\n          \u003cinput required type=\"email\" name=\"email\" /\u003e\n          \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n        \u003c/form\u003e\n      \u003c/ValidateForm\u003e\n      \n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n\n```\n\n## License\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/arshad-yaseen/form-validation-react/blob/main/LICENCE) \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farshad-yaseen%2Fform-validation-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farshad-yaseen%2Fform-validation-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farshad-yaseen%2Fform-validation-react/lists"}