Custom error messages as data attribute

[Flowgram]

Hi there,

It would be really nice if you could add a custom error message as a data attribute to a field.

I would assume that data-bouncer-message would do the trick but it only works when a pattern fails, as you can see from this fiddle:

https://jsfiddle.net/rsx83ouw/5/

Other than that, a great library!

[Flowgram]

I went ahead and forked bouncer to achieve this. When I have time I can issue a PR if you want.

[juliendude]

Hi there,

Hi there,

I just ran into this issue and was wondering if I was doing something wrong. I agree with @Flowgram.
I checked the following PR checked that PR: #29 but it ended up using a different approach.

The question I would raise is:
do we want two data attributes such as [data-bouncer-pattern-message] and [data-bouncer-message]?
Would there be a need to have one for the actual pattern and one for the custom error message?

Having the ability to set a custom error message via data attribute is great. Especially in the context of a multi-language site. You don't need to have a i18n file for each language. Which then require a content person to send the info to a dev, and for the dev to add it.
Custom error messages can be manageable via a cms for example.

Super @cferdinandi what is your take on that?

[iamkeir]

You can create your own custom attributes, see the demo in the docs: https://codepen.io/cferdinandi/pen/ywMdKp

Specifically, line 22 of the demo JS:

messages: {
  valueMismatch: function (field) {
    var customMessage = field.getAttribute('data-bouncer-mismatch-message');
    return customMessage ? customMessage : 'Please make sure the fields match.'
  }
}

You can create any data-attr format/naming convention and values you wanted.

Another example:

messages: {
  missingValue: {
    default: function(field) { return field.getAttribute('data-required-msg') ? field.getAttribute('data-required-msg') : 'Required'; }
  }
}

[montemartin]

I just deployed this on a project and [data-bouncer-message] worked on all fields. Trying it on another and it doesn't work. The one that worked was using the CDN and loading v1.0.5. The non-working project I used downloaded v1.4.6. My conclusion is that it worked on all fields as a data attribute originally, and has since been changed.

[zizther]

I can back up what @montemartin has said, it works in 1.0.5, but all other versions it does not work. I have gone through all the versions and it does not seem to work in any of them, so it has to be set in the JS or use the example @iamkeir mentioned.

[er314]

Hi,

Actually, as hinted by @iamkeir here #39 (comment) ,
the ability to configure custom error message per [ field + constraint-type ] (instead of only per [ constraint-type ] )
IS readily supported by the current featureset
(besides a small bug which as of today is to be fixed, see my issue report & pull request #58).
The rationale is to define the error message not via a string, but via a function.

-> Below I give 2 example use cases (the 1st one is in reply to @tbb2 request #29 (comment))

client-side :

	let formDomId = jsConfigBouncer.formDomId;             // bouncer configuration data, built server-side
	let defaultMessages = jsConfigBouncer.DefaultMessages; // bouncer configuration data, built server-side

	var cfg = new Object();

	// use case 1 : customizing missingValue error message, per field (with fallback default message if not customized for a given field)
	
	cfg.messages = new Object();
	cfg.messages.missingValue = new Object();

	message = function (field) { let customMessage = field.getAttribute('data-bouncer-message-missingvalue'); return (customMessage) ? customMessage : defaultMessages.missingValue; }
	cfg.messages.missingValue.checkbox = message;
	cfg.messages.missingValue.radio = message;
	cfg.messages.missingValue.select = message;
	cfg.messages.missingValue['select-multiple'] = message;
	cfg.messages.missingValue.default = message;

	// use case 2 : with a custom validation rule  (here, the rule checks that the field value equals another field value)

	// declare the custom validation rule
	cfg.customValidations = new Object();
	cfg.customValidations.equalsField = function (field) {
		if (! field.hasAttribute('data-bouncer-message-equalsfield')) return false;  // skip if validation is irrelevant to this field
		compareFieldDomId = field.getAttribute('data-bouncer-param1');
		compareField = document.getElementById(compareFieldDomId);
		if (field.value === compareField.value) return false;  // = no validation error
		else return true; // = validation error
	};

	message = function (field) { let customMessage = field.getAttribute('data-bouncer-message-equalsfield'); return (customMessage) ? customMessage : defaultMessages.equalsField; }
	cfg.messages.equalsField = message;

	// run the validator
	var validate = new Bouncer(formDomId, cfg);

server-side :

	$formDomId = "#my-form";
	$defaultMessages = array();

	// use case 1

	$defaultMessages["missingValue"] = "This value is required";
	...
	// now the specific field
	$customMessage = "Please accept the end user agreement";
	$out = "<input type='checkbox' required data-bouncer-message-missingvalue='{$customMessage}' ...

	// use case 2

	$defaultMessages["equalsField"] = "This field must equal the above field";
	...
	// now the specific field
	$compareFieldDomId = "#my-form-otherfield";
	$out = "<input type='text' data-bouncer-message-equalsfield='' data-bouncer-param1='{$compareFieldDomId}' ...
	// or, for a custom error message specific to this field :
	$customMessage = "The confirmation email must match the email address";
	$out = "<input type='text' data-bouncer-message-equalsfield='{$customMessage}' data-bouncer-param1='{$compareFieldDomId}' ...
	
	// build the bouncer configuration data
	$configBouncer = array("formDomId" => $formDomId, "defaultMessages" => $defaultMessages);
	
	// convert the config into javascript, and write it as javascript code / javascript variable jsConfigBouncer
	// ... as per your code framework

[R4tt0n]

This is my first github post, so I hope I'm doing everything right.

Thanks @iamkeir and @er314 for explaining how to show a custom error message. But since I'm not a very good JS programmer, it still took me a while to make it all work.

For people like me, I have created a demo html file that shows both methods of showing a custom error message (1 with custom error checking, 1 with replacing just the error message of a standard error checking function.)

I had to upload it as TXT, because adding it as code did not work here. Hope this is useful for somebody.

custom message.txt