Modify text "This field is required!"

quarfie · September 7, 2021, 2:47pm

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…

delfs · September 7, 2021, 11:33pm

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

github.com

vue-generators/vue-form-generator/blob/721a4eebbde77040a1318e60aa9ef21229bbcf99/src/utils/validators.js

import { defaults, isNil, isNumber, isInteger, isString, isArray, isFunction, isFinite } from "lodash";
import fecha from "fecha";

let resources = {
	fieldIsRequired: "This field is required!",
	invalidFormat: "Invalid format!",

	numberTooSmall: "The number is too small! Minimum: {0}",
	numberTooBig: "The number is too big! Maximum: {0}",
	invalidNumber: "Invalid number",
	invalidInteger: "The value is not an integer",

	textTooSmall: "The length of text is too small! Current: {0}, Minimum: {1}",
	textTooBig: "The length of text is too big! Current: {0}, Maximum: {1}",
	thisNotText: "This is not a text!",

	thisNotArray: "This is not an array!",

	selectMinItems: "Select minimum {0} items!",
	selectMaxItems: "Select maximum {0} items!",

This file has been truncated. show original

And basically add this to your page:

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

quarfie · September 8, 2021, 12:44am

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.

delfs · September 8, 2021, 12:47am

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.

c

quarfie · October 14, 2021, 4:20pm

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?

delfs · October 27, 2021, 12:44am

add a key to the BF element called errorMsg

Eg:

{
 ...
 "errorMsg" : "This panel has an error.",
...
}

Owen · December 14, 2022, 6:37pm

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].nameFirst.help”,
“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”: “model.env.show.form”,
“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.

Owen · December 14, 2022, 6:54pm

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

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

Owen · December 14, 2022, 7:01pm

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

“validator”: “calc”,
“validator_calc”: “model.form.shipping.phone.match(/^$?([0-9]{3})$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/)”,