set Locale problem

[karakockaan]

I defined 'this.validator = new SimpleReactValidator({locale: 'tr'});' in constructor after 'super (props);'. But I could not work it. Why Could not I set Locale?

Thanks,
Kaan

[stuyam]

What isn't working? It is giving you a Warning in console saying the locale is not loaded? You need to make sure you include the locale that you want into your page. So make sure you are including the dist/locale/tr.js file.

[karakockaan]

Thanks for answer. Yes, react project includes dist/locale/tr.js also src/locale/tr.js. Problem is error or warning message can not translate to Turkish. Messages are still English. When I analyzed console, It wont have any error or warnings about translate problem.

[stuyam]

What is you setup? Are you using it in the global scope on window or are you using something like requirejs or using modules with something like webpack? Also make sure the turkish files is loaded first.

[KeitelDOG]

I didn't know how to use locale. After reading code source, I realized that each locale file was calling static method addLocale('xx' {}) automatically, so indeed you must import each locale first. You can also add your own locale values and add it with addLocale. He is a brief example where I use a kind of Facade pattern to create the SimpleReactValidator instance:

import SimpleReactValidator from 'simple-react-validator';
import 'simple-react-validator/dist/locale/fr';
import 'simple-react-validator/dist/locale/es';

// forceUpdate is a React State setter function passed from the component that call Validator()
// it's my setup to force validation calculation on direct submit
// lang is passed from the component too
const Validator = (forceUpdate, lang = 'en') => {
  // sample translation for Haiti (ht) locale
  SimpleReactValidator.addLocale('ht', {
    accepted: 'Ou dwe aksepte chan :attribute.',
  });

  return new SimpleReactValidator({
    locale: lang,
    autoForceUpdate: {
      forceUpdate,
    },
    element: message => <span>{message}</span>,
  });
};

export default Validator;

Just in case: my components, forceUpdate looks like this:

const [fu, forceUpdate] = useState(0);
const [validator] = useState(Validator(forceUpdate, lang()));

And on submit, I call:

if (!validator.allValid()) {
  snackbar('error', 'signup form not valid');
  validator.showMessages();
  forceUpdate(fu + 1);
  return;
}

[stuyam]

Yeah that is correct @KeitelDOG the locale file or custom locale needs to be added before using SRV. 👍

[prince17dec]

I tried to use custom messages with locale but it did not work. I want to add Swedish language support as well. which seems It is not working.

It only worked with rules locales not custom messages.

[prince17dec]

SimpleReactValidator.addLocale('svv', {
username: "Användarnamn är krävs.",
password: "Lösenord är krävs"
});

const validator = useRef(new SimpleReactValidator({locale: 'svv'}));

[prince17dec]

i got only this "Fält :attribut krävs." it should be "vändarnamn är krävs."