私はこれをanglejsを自分のJSコードに置き換えて解決しました。このアプローチは同じですが、JavaScriptのすべてのHTML入力タグを順番に調べてから、カスタム属性を検索します。存在する場合は、htmlタグのlang属性に基づいて言語を変更します。これが誰かにとって有益なことを願っています。
Webページ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LGS Test Java Login</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.panel-info
{
border-color: #5F4793;
}
.panel-info > .panel-heading
{
color: #ffffff;
background-color: #5F4793;
border-color: #5F47931;
}
.btn-primary
{
color: #fff;
background-color: #5F4793;
border-color: #5F4793;
}
.btn-primary:hover
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
.btn-primary:focus,
.btn-primary.focus
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center; color:#5F4793;">Test</h1>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div id="panel-heading" class="panel- heading">Connectez-vous !</div>
<div id="messages"></div>
<div class="panel-body" >
<form name="loginForm" id="loginForm" method="post" action="loginServlet">
<div class="form-group">
<div class="input-group" id="div1">
<input type="email" bert="required email" class="form-control" id="myLogin" name="uLogin" placeholder="Votre courriel"
style="position: relative; top: 1px;" data-toggle="tooltip" data-placement="left" title="">
<label for="uLogin" class="input-group-addon glyphicon glyphicon-user" style="position: relative; top: 1px;"> </label>
</div>
</div>
<div class="form-group">
<div class="input-group" id="div2">
<input type="password" bert="required" class="form-control" id="myPassword" name="uPassword"
style="position: relative; top: 1px;" placeholder="Votre mot de passe" data-toggle="tooltip" data-placement="bottom" title="">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-lock" style="position: relative; top: 1px;"></label>
</div>
</div>
<div>
<input id="myBtn" class="btn btn-primary pull-right" type="button" value="Connectez"></a>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
</div>
</div> <!-- row -->
</div> <!-- container -->.
<script src="js/bertrand.js"></script>
</body>
</html>
そしてbertrand.jsファイル：私はすでにを試してみました
/*
Small footprint JavaScript library inspired by AngularJS that allows better control of the bootstrap tooltip message wording.
Depends on: bootstrap.js, required to be placed at bottom of HTML, has to do with DOM loading.
Contrary to AngularJS, does not rely on browser language to determine validation message language, uses html tag's lang attribute value.
*/
setTimeout(function(){ document.getElementById("myBtn").addEventListener("click",validateForm); }, 500);
/* BEGIN BLOCK
get page language from html tag; this works around AngularJS bug as described at:
http://stackoverflow.com/questions/38460174/how-can-i-force-a-page-language-from-servlet-or-jsp-so-angularjs-will-pick-it-up
*/
var mylanguage = "fr";
var myhtmlelement = document.getElementsByTagName("html");
for (var i = 0; i < myhtmlelement.length; i++) /* we should have only one of course */
{
var attrib = myhtmlelement[i].attributes;
for (var x = 0; x < attrib.length; x++)
{
if (attrib[x].name === 'lang')
{
mylanguage = attrib[x].value;
}
}
}
/* END BLOCK */
setTimeout(adaptPlaceholder(mylanguage), 500);
var whitespace = " \t\n\r";
function isEmpty(s)
{ return ((s == null) || (s.length == 0));
}
// Returns true if string s is empty or whitespace characters only.
function isWhitespace(s)
{
var i;
// Is s empty?
if (isEmpty(s)) return true;
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (whitespace.indexOf(c) == -1) return false;
}
return true;
}
function isEmail(s)
{
if (isWhitespace(s)) return false;
var i = 1;
var sLength = s.length;
while ((i < sLength) && (s.charAt(i) != "@"))
{
i++;
}
if ((i >= sLength) || (s.charAt(i) != "@")) return false;
else i += 2;
while ((i < sLength) && (s.charAt(i) != "."))
{
i++;
}
if ((i >= sLength - 1) || (s.charAt(i) != ".")) return false;
else return true;
}
function validateForm()
{
var elements = document.getElementsByTagName("input");
var shipthis = true;
for (var i = 0; i < elements.length; i++)
{
var attrib = elements[i].attributes;
for (var x = 0; x < attrib.length; x++)
{
/* find tags with custom attribute "bert" in them */
if (attrib[x].name === 'bert')
{
$(elements[i]).closest('div').removeClass("input-group").removeClass("has-error").addClass("input-group has-success");
if(attrib[x].value.indexOf('email') > -1)
{
if(!isEmail(elements[i].value))
{
$(elements[i]).closest('div').removeClass("input-group").removeClass("has-success").addClass("input-group has-error");
for (var z = 0; z < attrib.length; z++)
{
// add supported translations here, or default to French:
if (attrib[z].name === 'title')
{
if(mylanguage == "en")
{
attrib[z].value = "Please enter a valid email address here";
}
else
{
attrib[z].value = "SVP modifier pour une adresse de courriel valide";
}
}
}
$(elements[i]).tooltip('show');
shipthis = false;
}
}
if(attrib[x].value.indexOf('required') > -1)
{
if(isEmpty(elements[i].value))
{
$(elements[i]).closest('div').removeClass("input-group").removeClass("has-success").addClass("input-group has-error");
for (var y = 0; y < attrib.length; y++)
{
if (attrib[y].name === 'title')
{
// add supported translations here, or default to French:
if(mylanguage == 'en')
{
attrib[y].value = "Please add a value here";
}
else
{
attrib[y].value = "SVP ajouter une valeur ici";
}
}
}
$(elements[i]).tooltip('show');
shipthis = false;
}
}
}
} /* end for get attributes in elements */
} /* end for get elements with input tag */
if(shipthis)
{
var myform = document.getElementsByTagName("form");
myform[0].submit();
}
}
function adaptPlaceholder(mylanguage)
{
if(mylanguage == "en")
{
var el = document.getElementsByTagName('input');
for (var i = 0; i < el.length; i++)
{
var attrib = el[i].attributes;
for (var x = 0; x < attrib.length; x++)
{
if(el[i].type == "email")
{
if (attrib[x].name == "placeholder")
{
attrib[x].value = "Your email address";
}
}
else if(el[i].type == "password")
{
if (attrib[x].name == "placeholder")
{
attrib[x].value = "Your password";
}
}
else if(el[i].type == "button")
{
if (attrib[x].name == "value")
{
attrib[x].value = "Connect";
}
}
}
}
document.getElementById("panel-heading").innerHTML = 'Connect !';
}
}
とが動作しませんでした。 – Quadmore