Tuesday, February 7, 2017

APEX 5.1: Translate HTML5 Client-Side Validation Messages

You may know that in APEX 5.1 there are some new functionalities regarding client-side messaging - for example, the capability to display success or error messages without a full page reload or new JS API for handling client-side messages. There are also enabled HTML5 Form Validations, so you may saw something like this in your apps:



The problem that I had is that the user wanted to translate those messages to the other language (in my case Croatian). I thought - no problem. I'll find those messages in the APEX messages dictionary and translate them to the Croatian. After some exploring I found out that those messages are actually browser depended and you can't translate them (the only option is to install browser in different language).

Fortunately, the APEX development team has thought about this and you can override those messages by defining custom attribute named data-valid-message under the item's Custom Attributes property:



And now the form should look like this:


If you don't want to do this for each and every item in your app you can create On Load Dynamic Action on Global Page (page 0) that looks like this:


which will add this attribute to all required fields.

You can read more about the data-valid-message attribute in apex.item documentation.

Enjoy!

Tested on APEX 5.1.0.00.45



2 comments:

  1. Dear Marko
    thanks a lot for this post.It helped me very much.
    I have some questions,and I'll be very pleasure if you answer them.

    how can I find the list of validation names to change their attributes.
    for example :required in
    $(':required').attr('data-valid-message','ejbari');

    is a validation and data-valid-message is its attribute.
    I want to translate the validation messages.
    Is there any list of validation names for this purpose?

    thank you

    ReplyDelete
    Replies
    1. The validation names are defined by HTML standards:
      - disabled: Specifies that the input element should be disabled
      - max: Specifies the maximum value of an input element
      - min: Specifies the minimum value of an input element
      - pattern: Specifies the value pattern of an input element
      - required: Specifies that the input field requires an element
      - type: Specifies the type of an input element
      You can have a look at W3C site for further info: https://www.w3schools.com/html/html_form_attributes.asp

      Delete