Localisation can be achieved easliy with Valid88. Starting with the UI language settings that are used to populate the form
const lang = {
en:{
USER_DETAILS:'User Details',
FIRSTNAME:'Firstname',
LASTNAME:'Lastname',
EMAIL:'Email',
DOB:'Date of Birth',
LOGIN:'Login',
},
fr:{
USER_DETAILS:'Détails de l\'Utilisateur',
FIRSTNAME:'Prénom',
LASTNAME:'Nom de famille',
EMAIL:'Email',
DOB:'Date de naissance',
LOGIN:'s\'Identifier',
}
}
{
"messages" : {
"MAND_DEFAULT" : "le champ '${DEF.label}' doit être fourni",
"EMAIL_DEFAULT" : "le champ '${DEF.label}' n'est pas un email valide",
"DATE_ATLEAST" : "le champ '${DEF.label}' doit être au moins ${VARIANT.value} ${FLD.DATEPART_INTERVALS.${VARIANT.datepart}}",
"DATE_ATMOST" : "le champ '${DEF.label}' doit être au plus ${VARIANT.value} ${FLD.DATEPART_INTERVALS.${VARIANT.datepart}}",
"DATE_BEFORE" : "le champ '${DEF.label}' doit être avant ${PRM.refDate}",
"DATE_AFTER" : "le champ '${DEF.label}' doit être après ${PRM.refDate}",
"REGEX_DEFAULT" : "le champ '${DEF.label}' contient des caractères invalides",
"LENGTH_MAX" : "le champ '${DEF.label}' ne peut pas contenir plus de ${CFG.max} caractères",
"LENGTH_MIN" : "le champ '${DEF.label}' doit contenir au moins ${CFG.min} caractères"
},
"fields" : {
"DATEPART_INTERVALS": {"days":"journées", "months":"mois", "years":"années"}
}
}
And then switch locale when the radios are clicked
const handleLanguageChange = (selectedLang) => {
setValues({...form, language:selectedLang, errors: []});
if (selectedLang == 'fr') {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", './valid88/valid88-messages_fr.json', false );
xmlHttp.send( null );
v88.setLocale(JSON.parse(xmlHttp.responseText));
} else {
v88.setLocale(null);
}
v88.setVariables(lang[selectedLang]);
}
The forms above are created with React and MaterialUI. The source code for this page can be found
here
out more about Valid88 at Github