You are viewing limited content. For full access, please sign in.

Question

Question

Form - Customize Error Message

asked on March 27, 2017

Hi,

I'm using Laserfiche Forms version 9.2.1.1069 and I want to know how to customize error message for a simple checkbox?

The checkbox need to be checked (only 1 choice) ; if the user dont check it, I have my error message "You must check the box".

By default, the error message is "You must check at least one case".

 

I know I need to write something on CSS and Javascript / Javascript, but I dont know what. I dont know Javascript.

0 0

Answer

APPROVED ANSWER
replied on March 27, 2017 Show version history

Hi Olivier,

You can consider this thread for an example of using CSS to append additional information to the validation message. It is nontrivial to modify the error message altogether using custom code as the error message itself does not exist in the DOM until it is created. You might try the following JavaScript:

$(document).on('DOMNodeInserted', '.myCheckbox div.ws-errorbox', function() {
  $('.myCheckbox p.ws-errormessage').text('This is my custom error message.');
});

where the checkbox field is given the "myCheckbox" CSS class for selection. This may not work in older versions of Internet Explorer; see full caveats of mutation events (i.e. the DOMNodeInserted event used in the example) in this MDN article.

Note that with Forms 10.2 and onward, the ability to specify custom validation messages is available out-of-the-box.

Hope this helps.

Note: This code will not work with Forms 10.2 because of a different library for validation changing the names of certain classes; the ws-errorbox and ws-errormessage classes in particular no longer exist. However as mentioned, Forms 10.2 has its own built-in way of specifying custom validation messages.

Update: Code updated to avoid changing the message for every error message on validation error for the .myCheckbox element.

1 0

Replies

replied on March 28, 2017

Hi James Newton,

Thank you for your help. That's working!

Regards

0 0
replied on March 28, 2017

Hum, James, something wrong.

 

When I check and uncheck the case, the custom error message appear to other field too.

0 0
replied on March 28, 2017

As written, my code should operate for any checkbox with the "myCheckbox" class. How are you specifying which checkbox in your form?

0 0
replied on March 28, 2017

With "myCheckbox"

0 0
replied on March 28, 2017

Others have blank

0 0
replied on March 28, 2017 Show version history

Ah, I see my error. Add the .myCheckbox selector before the p.ws-errormessage selector as well. I'll update the code in my original post to reflect this.

The reason for this was that the code would wait for an error to occur for the myCheckbox element, but then would stupidly update all messages instead of just the one. With the correction, now it will wait for the error in the myCheckbox element, and then only update the error message for that element.

1 0
replied on March 28, 2017

You are the best!

Thank you ^^

0 0
replied on March 28, 2017

James, something wrong! cheeky

If I submit my form without check the box, the error message dont appear. (Look the box, is red but I dont have the error).

 

In the other hand, if I check then uncheck the box, I have the custom error message.

0 0
replied on March 28, 2017

Oh James, this bug is only in the preview. Everythink is ok.

Thank you.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.