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.
Check this website - reactvalidator.tech
You can install the package using npm or yarn:
npm i form-validation-react
yarn add form-validation-react
To use the library, import it in your React component:
import ValidateForm from "form-validation-react"Then, wrap your form with :
<ValidateForm
onSubmit={(event)=> {
console.log("Form submitted",event);
}}
errorElement="#error_show_element" // optional
rules={{
// add the rules here
}}
>
<form>
<h1 id="error_show_element" > // The error message will appear in this element </h1>
<input type="text" required />
</form>
</ValidateForm>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
validateRequired: {
action: "show_error_message",
message: "fill all required fields",
applyOnly:["name","password"] // checking only this inputs are filled
notvalidated: (notFilledInputs) => {
console.log("Not filled required inputs",notFilledInputs);
}
onsuccess:()=> {
console.log("All required fields are filled");
}
}If 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.
| Key | Type | Parameter | Optional |
|---|---|---|---|
action |
string |
input_red_border,show_error_message,both |
no |
message |
string |
Message | yes |
applyOnly |
array |
Name of the inputs | yes |
notvalidated |
callback function |
notFilledInputs | yes |
onsuccess |
callback function |
no params | yes |
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
ValidateMinMax: {
when: "typing"
message : {
min: "Full name must be at least 4 characters",
max: "Full name must be at most 8 characters"
},
exceedsMax: ()=> {
console.log("Maximum length exceeded");
},
exceedsMin: ()=> {
console.log("Minimum length exceeded");
}
onsuccess:(validatedInput)=> {
console.log("Length is in range of :",validatedInput);
}
}
<input min={4} max={8} type="number" required />the min in message object is when exceeded minimum the message will show.
the max in message object is when exceeded maximum the message will show
| Key | Type | Parameter | Optional |
|---|---|---|---|
when |
string |
typing,onblur |
no |
message |
object |
Messages | yes |
exceedsMax |
callback function |
when exceeded max | yes |
exceedsMin |
callback function |
when exceeded min | yes |
onsuccess |
callback function |
validatedInput | yes |
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
ValidateEmail: {
type: "yahoo",
emailInput: "my_email",
message: "Please enter a valid yahoo email",
onsuccess: () => console.log("Email is valid"),
invalid: () => console.log("Email is invalid"),
when: "onblur",
}<input name="my_email" type="email" required />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)
emailInput: a string representing the name of the input element in the form that contains the email address
This function is used to validate input fields against a specific pattern, such as a regular expression or a wildcard pattern.
ValidatePattern:{
input: 'email',
pattern: /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/,
type: 'regex',
when: 'typing',
allowEmpty: false,
onsuccess: (inputElement) => console.log('Validation succeeded!’),
invalid: () => console.log('Validation failed!’),
errorMessage: 'Please enter a valid email address.'
}ValidatePattern:{
pattern: /^\S+@\S+\.\S+$/,
modifiers: 'i',
input: 'email',
type: 'regex',
when: 'typing',
errorMessage: 'Please enter a valid email address',
}ValidatePattern:{
pattern: '*.com',
type: 'wildcard',
modifiers: 'i',
input: 'email-input',
when: 'typing',
errorMessage: 'Please enter an email address ending in .com'
}ValidatePattern:{
pattern: /^\S+@\S+\.\S+$/,
modifiers: 'i',
input: 'email',
type: 'regex',
when: 'typing',
allowEmpty: true,
}We provide two different patterns - a regular expression pattern and a wildcard pattern - along with options for case-insensitivity (modifiers: 'i') and custom error messages.
We also use the allowEmpty option to allow the input to be empty, which can be useful for optional fields.
ValidatePhone: {
phoneInput: 'phone_input', // required
countryCode: 'US', // required
when: 'onblur', // required
onsuccess: (input) => console.log(`${input.value} is a valid phone number`),
invalid: () => console.log('Invalid phone number'),
message: 'Please enter a valid US phone number',
isLandlineNumber: (isLandline) => console.log(`Is a landline: ${isLandline}`),
isMobileNumber: (isMobile) => console.log(`Is a mobile: ${isMobile}`)
}<input type="number" name="phone_input" />isLandlineNumber: a function that receives a boolean value indicating if the input is a landline number.
isMobileNumber: a function that receives a boolean value indicating if the input is a mobile number.
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.
ValidateNumber: {
input: "my-number-input", // required
when: "typing", // required
min: 0,
max: 100,
decimalPlaces: 2,
allowNegative: false,
integersOnly: false,
base: 10,
customErrorMessages: {
invalidNumber: "Invalid number",
range: "Number must be between 0 and 100",
decimalPlaces: "Number must have no more than 2 decimal places",
negative: "Negative numbers are not allowed",
integersOnly: "Only integers are allowed",
base: "Number must be in base 10",
},
onsuccess: () => {
console.log("Validation succeeded!");
},
invalid: () => {
console.log("Validation failed!");
}
},<input type="number" name="my-number-input" />allowNegative (optional): A boolean value indicating whether negative numbers are allowed. Defaults to true.
integersOnly (optional): A boolean value indicating whether the number must be an integer. Defaults to false.
customErrorMessages (optional): An object containing custom error messages. Valid properties are invalidNumber, range, decimalPlaces, negative, integersOnly, and base.
ValidateInteger: {
when: 'onblur', // or 'typing'
input: 'age', // name of the input element to validate
minValue: 0,
maxValue: 100,
uniqueValues: [10, 20, 30],
positiveOnly: true,
evenOnly: true,
divisibleBy: 5,
invalid: () => {
console.log('Invalid input');
},
customErrorMessages: {
notANumber: 'Please enter a number',
notAnInteger: 'Please enter an integer',
outOfRange: 'Please enter a value between 0 and 100',
notUnique: 'Please enter a unique value',
notPositive: 'Please enter a positive value',
notEven: 'Please enter an even value',
notDivisible: 'Please enter a value divisible by 5',
},
},-
when(required): A string indicating when to run the validation. Possible values are 'onblur' (validate on blur) and 'typing' (validate while typing). -
input: (required) A string representing the name of the input element to validate. -
minValue(optional): An integer representing the minimum value that the input element can have. -
maxValue(optional): An integer representing the maximum value that the input element can have. -
uniqueValues(optional): An array of integers representing values that should be unique. -
positiveOnly(optional): A boolean indicating whether the input element can only have positive values. -
evenOnly(optional): A boolean indicating whether the input element can only have even values. -
divisibleBy(optional): An integer representing a number by which the input element should be divisible. -
invalid(optional): A function to call if the input element is invalid. -
customErrorMessages(optional): An object containing custom error messages to display.
ValidateFloat: {
when: 'onblur', // when to validate input - onblur or typing
input: 'input-name', // name of input field to validate
required: true, // whether the input is required or not
min: 0, // minimum value for input
max: 100, // maximum value for input
precision: 2, // maximum number of decimal places allowed
customErrorMessages: {
required: 'This field is required!',
invalid: 'Please enter a valid number!',
min: 'Please enter a number greater than or equal to {min}!',
max: 'Please enter a number less than or equal to {max}!',
precision: 'Please enter a number with at most {precision} decimal places!',
},
},ValidateDate: {
when: 'typing', // required
input: 'dob', // required
minDate: new Date('2000-01-01'),
maxDate: new Date('2023-03-07'),
allowOnlyBusinessDay: true,
allowOnlyWeekend: false,
customFormat: 'dd-MM-yyyy',
timeZone: 'Asia/Kolkata',
customErrorMessages: {
invalidDate: 'Invalid date format. Please enter a valid date.',
minDate: 'Date should not be earlier than 1st January 2000.',
maxDate: 'Date should not be later than 7th March 2023.',
businessDay: 'Selected date is not a business day.',
notWeekend: 'Selected date is not a weekend.',
invalidFormat: 'Date format is not valid. Please enter the date in dd-MM-yyyy format.',
invalidTimeZone: 'Invalid time zone. Please enter a valid time zone.',
}
}The when rule determines when the validation should occur. It can be set to "typing" or "onblur".
The input rule specifies the name of the input field to validate.
The minDate rule specifies the minimum date that is allowed. Dates before this minimum date are considered invalid.
The maxDate rule specifies the maximum date that is allowed. Dates after this maximum date are considered invalid.
The allowOnlyBusinessDay rule determines whether or not only business days are allowed. Business days are weekdays (Monday to Friday).
The allowOnlyWeekend rule determines whether or not only weekends are allowed. Weekends are Saturday and Sunday.
The customFormat rule specifies the custom format for the date. If not specified, the date will be validated in the default format.
The timeZone rule specifies the time zone for the date. If not specified, the date will be validated in the local time zone.
The customErrorMessages rule allows you to specify custom error messages for different validation rules. If not specified, default error messages will be used.
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.
ValidateTime: {
when: 'onblur', // required
input: 'time-input', // required
customErrorMessages: {
invalidFormat: 'Invalid time format, please enter time in the format HH:mm',
invalidRange: 'Time is out of range, please enter a valid time',
invalidInterval: 'Time is not within the specified interval, please enter a valid time',
invalidTimezone: 'Invalid timezone, please enter a valid timezone',
},
timeRange: {
startTime: '08:00',
endTime: '17:00',
},
timeInterval: {
startInterval: 480,
endInterval: 1020,
},
timezone: 'America/New_York'
}-
when: A string value that specifies when to perform the validation. It can be either 'typing' or 'onblur'. -
input: A string value that specifies the name of the input element to validate. -
customErrorMessages: An object that specifies custom error messages to use for the validation. -
timeRange: An object that specifies a time range that the input value should fall within. -
timeInterval: An object that specifies an interval that the input value should fall within. -
timezone: A string value that specifies the timezone to use for the validation. If not specified, the local timezone is used.
This function validates the URL. It checks the URL for well-formedness, protocol validity, domain validity, IP address validity, accessibility, and invalid characters.
ValidateUrl: {
when: "typing", // required
input: "urlInput", // required
CustomErrorMessages: {
invalidUrl: "Invalid URL",
invalidProtocol: "Invalid Protocol",
invalidDomain: "Invalid Domain",
invalidIpAddress: "Invalid IP Address",
inaccessibleUrl: "Inaccessible URL",
invalidCharacters: "Invalid Characters",
protocolNotAllowed: "Protocol not allowed",
},
checkUrl: true,
checkProtocol: true,
checkDomain: true,
checkIpAddress: true,
checkInAccessibleUrl: true,
checkCharacters: true,
protocols: ["https", "http"],
},-
when: When to validate the URL input. This can be either "typing" or "onblur". -
input: The name of the input field to validate. -
CustomErrorMessages: Custom error messages for each type of validation error. This is an optional property. -
checkUrl: Whether to check the URL for well-formedness. -
checkProtocol: Whether to check the protocol of the URL. -
checkDomain: Whether to check the domain name of the URL. -
checkIpAddress: Whether to check the IP address of the URL. -
checkInAccessibleUrl: Whether to check if the URL is accessible. -
checkCharacters: Whether to check for invalid characters in the URL. -
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.
ValidateCreditCard: {
when: "typing", // required
cardNumber: "card-input", // required
allowedCards: ["Visa", "Mastercard"],
expirationDate: "expiration-date",
cvv: "cvv",
billingZip: "billing-zip",
customErrorMessages: {
invalidCardNumber: "Invalid credit card number",
onlyAllowedCards: "Only Visa and Mastercard are allowed",
invalidExpirationDate: "Invalid expiration date",
invalidCVV: "Invalid CVV code",
invalidBillingZip: "Invalid billing zip code",
},
getCardType: (cardType) => console.log(cardType); // Visa
}-
when- When to validate. This can be either "typing" or "onblur". -
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. -
cardNumber- A string that contains the name of the input element that contains the credit card number. -
expirationDate- A string that contains the name of the input element that contains the expiration date. -
cvv- A string that contains the name of the input element that contains the CVV code. -
billingZip- A string that contains the name of the input element that contains the billing zip code. -
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. -
getCardType- An optional function that can be used to determine the card type based on the credit card number.
Here is an example of how to use the library in a ReactJS component:
import React from "react";
import ValidateForm from "form-validation-react";
function App() {
return (
<div className="App">
<ValidateForm
rules={{
validateRequired: {
action: "input_red_border",
notvalidated: (notFilledInputs) => {
console.log("Not filled required inputs", notFilledInputs);
}
},
ValidateMinMax: {
when: "onblur"
message : {
min: "Full name must be at least 4 characters",
max: "Full name must be at most 8 characters"
}
}
}}
>
<form>
<input min={4} max={8} type="text" name="full_name" required />
<input required type="text" name="full_name" />
<input required type="email" name="email" />
<button type="submit">Submit</button>
</form>
</ValidateForm>
</div>
);
}
export default App;
