Hope my question does not appear to be too stupid.
I've been working on this issue for days.
Here's my question : how can I get the jQuery plug-in to work with the localization files ? My goal is to be able to display error messages in English or in French in my contact form. If the visitor is looking at my page in French I would like him to see validation messages in the contact form in the same language.
Even if I've tried other solutions none worked.
What am I doing wrong ?
<!DOCTYPE html>
<html>
<head>
<title><?php echo $lang['PAGE_TITLE_CONTACT']; ?></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic|Fjalla+One|Signika:700|Lobster|Cuprum:700' rel='stylesheet' type='text/css'>
</head>
<body>
<?php
include 'includes/navigation_menu.php';
?>
<div id="languages">
<a href="contact.php?lang=en"><img src="images/pays/eng.png" /></a>
<a href="contact.php?lang=fr"><img src="images/pays/fr.png" /></a>
</div>
<div class="mainDiv">
<div id="texteContact">
<p class="infosContact"><?php echo $lang['TEXT_ONE_FORM']; ?><br />
<?php echo $lang['TEXT_TWO_FORM']; ?></p>
<?php echo $lang['TEXT_FIVE_FORM']; ?> <br />
<?php echo $lang['TEXT_SIX_FORM']; ?>
</p>
<div id="btnLinkedIn">
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang:en_US</script>
<script type="IN/Share"></script>
</div>
<p class="infosContact">Mon code GitHub :</p>
</div>
<form id="formulaire" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" >
<label><?php echo $lang['INPUT_NAME']; ?></label>
<input type="text" id="name" name="name" placeholder="<?php echo $lang['PLACEHOLDER_NAME']; ?>" />
<label><?php echo $lang['INPUT_EMAIL']; ?></label>
<input type="email" id="email" name="email" placeholder="<?php echo $lang['PLACEHOLDER_EMAIL']; ?>" />
<label><?php echo $lang['INPUT_OBJECT']; ?></label>
<input type="text" id="object" name="object" placeholder="<?php echo $lang['PLACEHOLDER_OBJECT']; ?>" />
<label><?php echo $lang['INPUT_MESSAGE']; ?></label>
<textarea type="text" id="message" name="message" rows="10" placeholder="<?php echo $lang['PLACEHOLDER_MESSAGE']; ?>" ></textarea>
<br />
<br />
<input type="submit" value="<?php echo $lang['INPUT_SEND']; ?>" id="sendBtn" name="submit" />
</form>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<!-- jQuery Validation Plugin-->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="localization/messages_fr.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
If I leave only this line all messages will obviously be displayed in English :
<script type="text/javascript" src="js/jquery.validate.js"></script>
However if I add this line for French messages all the error messages will be in French (which was dowloaded from https://github.com/jzaefferer/jquery-validation/tree/master/src/localization). Why ?
<script type="text/javascript" src="localization/messages_fr.js"></script>
I've read that if we wanted to add other languages we only needed to add the corresponding file in localization folder.
Finally here's the French portion from localization file :
/*
* Translated default messages for the jQuery validation plugin.
* Locale: FR (French; français)
*/
$.extend($.validator.messages, {
required: "Ce champ est obligatoire.",
remote: "Veuillez corriger ce champ.",
email: "Veuillez fournir une adresse électronique valide.",
url: "Veuillez fournir une adresse URL valide.",
date: "Veuillez fournir une date valide.",
dateISO: "Veuillez fournir une date valide (ISO).",
number: "Veuillez fournir un numéro valide.",
digits: "Veuillez fournir seulement des chiffres.",
creditcard: "Veuillez fournir un numéro de carte de crédit valide.",
equalTo: "Veuillez fournir encore la même valeur.",
extension: "Veuillez fournir une valeur avec une extension valide.",
maxlength: $.validator.format( "Veuillez fournir au plus {0} caractères." ),
minlength: $.validator.format( "Veuillez fournir au moins {0} caractères." ),
rangelength: $.validator.format( "Veuillez fournir une valeur qui contient entre {0} et {1} caractères." ),
range: $.validator.format( "Veuillez fournir une valeur entre {0} et {1}." ),
max: $.validator.format( "Veuillez fournir une valeur inférieure ou égale à {0}." ),
min: $.validator.format( "Veuillez fournir une valeur supérieure ou égale à {0}." ),
maxWords: $.validator.format( "Veuillez fournir au plus {0} mots." ),
minWords: $.validator.format( "Veuillez fournir au moins {0} mots." ),
rangeWords: $.validator.format( "Veuillez fournir entre {0} et {1} mots." ),
letterswithbasicpunc: "Veuillez fournir seulement des lettres et des signes de ponctuation.",
alphanumeric: "Veuillez fournir seulement des lettres, nombres, espaces et soulignages.",
lettersonly: "Veuillez fournir seulement des lettres.",
nowhitespace: "Veuillez ne pas inscrire d'espaces blancs.",
ziprange: "Veuillez fournir un code postal entre 902xx-xxxx et 905-xx-xxxx.",
integer: "Veuillez fournir un nombre non décimal qui est positif ou négatif.",
vinUS: "Veuillez fournir un numéro d'identification du véhicule (VIN).",
dateITA: "Veuillez fournir une date valide.",
time: "Veuillez fournir une heure valide entre 00:00 et 23:59.",
phoneUS: "Veuillez fournir un numéro de téléphone valide.",
phoneUK: "Veuillez fournir un numéro de téléphone valide.",
mobileUK: "Veuillez fournir un numéro de téléphone mobile valide.",
strippedminlength: $.validator.format( "Veuillez fournir au moins {0} caractères." ),
email2: "Veuillez fournir une adresse électronique valide.",
url2: "Veuillez fournir une adresse URL valide.",
creditcardtypes: "Veuillez fournir un numéro de carte de crédit valide.",
ipv4: "Veuillez fournir une adresse IP v4 valide.",
ipv6: "Veuillez fournir une adresse IP v6 valide.",
require_from_group: "Veuillez fournir au moins {0} de ces champs.",
nifES: "Veuillez fournir un numéro NIF valide.",
nieES: "Veuillez fournir un numéro NIE valide.",
cifES: "Veuillez fournir un numéro CIF valide.",
postalCodeCA: "Veuillez fournir un code postal valide."
} );
