Jump to content

Form validation translation


JoshoB
 Share

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!

Link to comment
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/

Link to comment
Share on other sites

  • 5 years later...

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...