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