Customizing Texts
In ReqEase's Form Validator, you have the flexibility to customize the texts and messages used for validation errors. This can be particularly useful when you want to adapt the validation messages to different languages or simply provide a more tailored experience for your users.
Default Strings
By default, ReqEase provides a set of default strings for various validation scenarios. Here's an overview of the default strings you can customize:
Format Errors
defaultInvalid
: Message displayed for format-related errors, such as invalid email addresses or phone numbers.
Length Errors
defaultTooShort
: Message shown when the input value is shorter than the required length.defaultTooLong
: Message displayed when the input value exceeds the maximum allowed length.passwordTooShort
: Custom message for password fields when they are too short. You can use%{count}
as a placeholder for the required character count.passwordTooLong
: Custom message for password fields when they are too long. Like the previous option, you can use%{count}
as a placeholder.
Required Field
required
: Message indicating that a particular field is required.
Captcha
captcha
: Placeholder for customizing captcha-related messages. This can be especially useful when using custom captcha handlers.
Customizing Strings
To customize these strings to your liking, simply provide a new object under the strings
option when configuring the Form Validator. Replace the strings you want to change with your custom messages. Here's an example of how you can customize the strings:
const customStrings = {
format: {
defaultInvalid: "Invalid format. Please enter a valid value."
},
length: {
defaultTooShort: "This field is too short. Please enter at least %{count} characters.",
defaultTooLong: "This field is too long. Please limit it to %{count} characters or less.",
passwordTooShort: "Your password must be %{count} characters or longer.",
passwordTooLong: "Your password cannot exceed %{count} characters."
},
required: "This field cannot be left empty.",
captcha: {
// Customize captcha-related messages here if needed.
}
};
const formValidatorOptions = {
// Other options...
strings: customStrings
};
//use formValidatorOptions in ReqEase options
By customizing these strings, you can enhance the user experience and ensure that validation messages align with your application's requirements and language preferences.
Last updated
Was this helpful?