Localised validation error messages for forms

Wappler General How To
#1

Hello
I want to have text input validation errors in different languages.
I have a fixed set of supported languages and i am able to use a dropdown list and session storage to store language preference. I have a json file with translations of all areas of the website and i am using it to change headings , button text etc through drnamic attributes.

But I don’t know how to do the same for form/text input validation errors.

#2

The easiest way is to use the title attribute as in

<input type="text" required dmx-bind:title="{{errorMsg}}" />

This will show the default message as well as the translated message.

1 Like
#3

Can you please tell me where it goes , this is the code of password text input area
image

How do i say
data-msg-minlength=a dynamic attribute instead of
data-msg-minlength=“Please enter at least {20} characters.”

#4

My example uses pure HTML for the error message. In your case I would try placing the dmx-bind: thingy in front of the data- attribute and the variable as the text as in

dmx-bind:data-msg-minlength="{{errorMsg}}"

Edit: See List of all the dmx functions

2 Likes
#5

Thank you Ben for explaining the dmx-bind i feel i get it now but the code below is not working
I feel that something is overriding the code below and forcing the error message to be the one in the visual editor

So the code says this
image

but the editor remains this and the page only shows this message
image

#6 
dmx-text="form2.pwd.validationMessage">

I’m able to access the validation message like this so perhaps i should just a make an additional text area below the English error to show the translated error? Or is there a better way?

#7

I’m able to show the translated error message using form2.pwd.validationMessage to look up the translated value but i am not able to hide the English Message . How do i do that please ?

#8

I think that you will find that the default message will appear in the language that the browser has been set to. e.g. Browsers in English will show an English message, browsers formatted to Dutch will show the default message in Dutch.

#9

I tried Hindi, French and Dutch. The browsers language changed after relaunching the browser. The Browser UI is appearing in Hindi/French/Dutch. However the error message remains English

#10

You may like to try

 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

Ref: https://processwire.com/talk/topic/4322-form-validation-translation/

1 Like
#11

Thank you I will try it

#12

Btw @ben dmx-bind fields are always expressions so you don’t need the {{ and }}

1 Like