Jump to content
JoshoB

Form validation translation

Recommended Posts

I feel like I am missing something obvious or that I somehow haven't been able to find it using the search here or via Google, but my question is, hopefully, a simple one. 

I have to translate a website running on ProcessWire (love it, by the way!) to another language. Everything seems to be going fine, but for the life of me I have no idea how to translate the little error messages that pop up when a form doesn't validate. (I am talking about the forms on the frontend.)

I am using default ProcessWire settings and everything, but I cannot find where these strings are located and they don't turn up in any search through all the available files. If you're uncertain as to what I am talking about, it's the little balloons that pop up and say "Please fill out this field" and the like. 

Your help is much appreciated!

Share this post


Link to post
Share on other sites

Hi JoshoB and welcome to the PW forum - hope you like it!

Hmm, interrobang, can you force the browser to switch the language it uses in the tooltips by sending the correct accept-lang header with the page?

  • Like 1

Share this post


Link to post
Share on other sites

I thought I once chnage the messages language by setting <html lang="de">, but I tried it now again and had no success. Maybe I used some polyfill which did this for me?

Probably you have to use javascript for your custom messages then:

<form>
    <input type="text" required value="" oninvalid="setCustomValidity('Custom Message')"/>
    <input type="submit" value="Submit" />
</form>

http://jsfiddle.net/HdSqt/171/

Share this post


Link to post
Share on other sites

Add novalidate to the form attributes and theyr gone.

  • Like 2

Share this post


Link to post
Share on other sites

Ah! Gosh, no wonder I couldn't find it. 

Thanks for the help; I will see how to solve this in a clean way, now that I know what the problem is.

Share this post


Link to post
Share on other sites

Hello there. I know this is a quite old topic, however I was facing the same issue and fount an easy way to handle the browser errors: 

in my form I had the following:

$first_name_error = translate('Missing first name');

I've added my translation string to _strings.php:

_x('Missing first name', 'General');

And then in my HTML markup I had the following code showing the translation:

<div class="form-group col-lg-6 col-md-12 col-sm-12">
	<input type="text" name="first_name" placeholder="{$first_name}" required="" oninvalid="this.setCustomValidity('{$first_name_error}')" oninput="this.setCustomValidity('')">
</div>

Btw, the same approach was taken for the placeholder as well so $first_name was translated as well in my _strings.php

For sure, @soma suggested long time ago, one can disable all the error messages, however if you would prefer to have the tooltip active, this is a nice and easy way to achieve it. It took me a few hours to find the right approach, so hopefully the next one won't have to spend that much time. So far it worked with Opera, IE, Edge, Chrome. I did not test with Safari, but doubt it won't work as well 😉

Spoiler

image.png.f5400423e0ded60c70a09640d0b114cf.png

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...