Modify text "This field is required!"

Is there any way to override the text “This field is required!”?

(for example, if I want to display it in a different language)

I can use a custom validator and set required to false but then the * goes away.

I would also like to do the same with the other standard validators if possible, like “Invalid e-mail address!”, but these at least could be rewritten as custom…

Yes, you can overwrite all the error messages with some simple JS actually.

First: here is the source for the message texts so you can look up the other error keys

And basically add this to your page:

// add this JS to the onformLoad
VueFormGenerator.validators.resources.fieldIsRequired = "This field is required."

1 Like

Nice! Is there a way to make it so it’s always equals the result of a function?

I tried…

VueFormGenerator.validators.resources.fieldIsRequired = BF.i18n('ValidationRequired')

…but as I suspected, it only assigns the value at the time of the assignment, and does not automatically update when the language changes.

Obviously I could just re-run this every time the language changes - just wondered if there’s a better way.

Yeah, it’s not reactive, but I don’t think it needs to be either.

In a global action thats run when you change the lang, just do the stuff you need to. Same amount of code in the end.


1 Like

The text “Error” appears below the panel that contains a validation error.

VueFormGenerator.validators.resources does not contain a string for this. Is there any way it can be localized?

add a key to the BF element called errorMsg


 "errorMsg" : "This panel has an error.",
1 Like

For posterity: another technique to do this is to use a validator_calc which will use your custom errorMsg. You can then use other techniques, such as an errorMsg_calc to set the message conditionally (i.e. for different languages)

This is helpful if you want a simple validation type like required but need a custom message.

Example schema:

“help_calc”: “model.dict[model.env.language]”,
“hint_calc”: “model.dict[model.env.language].nameFirst.hint”,
“inputType”: “text”,
“label_calc”: “model.dict[model.env.language].nameFirst.label”,
“model”: “form.shipping.nameFirst”,
“placeholder_calc”: “model.dict[model.env.language].nameFirst.placeholder”,
“required_calc”: “model.config.required.nameFirst”,
“styleClasses”: “col-md-6 pt-0”,
“type”: “input”,
“validator”: “calc”,
“validator_calc”: “model.config.required.nameFirst ? model.form.shipping.nameFirst.length>0 : true”,
“visible_calc”: “”,
“errorMsg_calc”: “model.dict[model.env.language].errorMsgRequired”

This validator_calc checks to see if the field is required in the data model (model.config.required.nameFirst). If required, it checks to ensure the field has a value (length>0). If not required, it always validates.

Note that this will cause JS errors if you do not define the key in your data model. Meaning (for the example above), the key form.shipping.nameFirst must exist in the data model, otherwise you will get a JS typeError because lenght can’t be evaluated on a key that doesn’t exist. This can break page responsiveness.

To validate an email, you can use the following regex in a validator_calc:

“validator”: “calc”,
“validator_calc”: “^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/)”,

To validate a phone number (9 digit format, no country code), you can use the following regex:

“validator”: “calc”,
“validator_calc”: “^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/)”,