Dietmar Meier wrote:
frizzle wrote:
How can i check if ALL english fields are filled out, without
defining each and every field separately.
Fully untested quickhack:
function checkComplete(sLangIdentifier) {
var i, j, nForms, nElems, oCurForm, oCurElem, aTitles, rLang;
rLang = new RegExp("_" + rLang + "$", "i");
nForms = document.forms.length;
for (i=0; i<nForms; i++) {
oCurForm = document.forms[i];
nElems = oCurForm.elements.length;
for (j=0; j<nElems; j++) {
oCurElem = oCurForm.elements[j];
if ((oCurElem.type == "text" || oCurElem.type == "textarea")
&& oCurElem.name.match(rLang)
&& oCurElem.value == ""
) {
aTitles[aTitles.length]= oCurElem.title;
}
}
}
if (aTitles.length) {
alert(
"Information for " +
sLangIdentifier +
" is not complete!\n\n" +
"Please fill out the following inputs:\n" +
aTitles.join("\n")
);
}
}
ciao, dhgm
Elegant, but it seems to me that a better way is to have one form and
change the text labels depending on the language chosen. Only one
set of form elements is required with one set of validation rules.
Multiple error messages are required, maybe multiple messages for
each language but I've allowed for one per selected language.
Multiple classes are used on elements to show how to use styles in
this context. Note that the 'en' class doesn't need to be defined.
The reset and onload functions should account for page re-loads and
form reset as well - it's easy to get the selection and labels out of
sync.
Onclick is used for the radios rather than onchange because of IE's
implementation where onchange doesn't do anything until the control
loses focus (as per the spec, but different to Geko browsers and
confusing to many).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>test</title>
<style type="text/css">
..ge {display: none;}
..fr {display: none;}
</style>
<script type="text/javascript">
function getLang(f){
var b = f.elements['lang'];
var i = b.length;
while (i-- && !b[i].checked );
return b[i].value;
}
function changeLang(f,lang){
var div = document.getElementById(f.name + 'labels');
var s = div.getElementsByTagName('span');
var i = s.length;
lang = new RegExp('\\b'+lang+'\\b');
while (i--){
s[i].style.display =
(lang.test(s[i].className))? 'inline' : 'none';
}
}
function resetLang(f) {
var x = f.elements['lang'];
var i = x.length;
while ( i-- && !x[i].checked );
x[i].click();
}
function checkForm(f){
var errObj = {
en : 'English error message...',
ge : 'German error message...',
fr : 'French error message...'
}
var els = f.elements;
var i = els.length;
while (i--){
el = els[i];
if ( 'text' == el.type || 'textarea' == el.type ){
// do validation
if ( '' == el.value ) {
alert(errObj[getLang(f)]);
return false;
}
}
}
return true;
}
window.onload = function () {
document.forms['formA'].reset()};
</script>
</head>
<body>
<form action="" name="formA" onsubmit="return checkForm(this);">
<div id="formAlabels">
Select a language:<br>
English<input type="radio" name="lang" value="en" checked
onclick="changeLang(this.form,this.value)">
German<input type="radio" name="lang" value="ge"
onclick="changeLang(this.form,this.value)">
French<input type="radio" name="lang" value="fr"
onclick="changeLang(this.form,this.value)">
<br>
<input type="text" name="userName" size="30">
<span class="en">Name (english)</span>
<span class="ge">Name (german)</span>
<span class="fr">Name (french)</span>
<br>
<textarea name="userAddr" rows="5" cols="30"></textarea>
<span class="en">Address (english)</span>
<span class="ge">Address (german)</span>
<span class="fr">Address (french)</span>
<br>
<input type="reset" onclick="
this.form.reset();
resetLang(this.form);
">
<input type="submit" value="Send details...">
</div>
</form>
</body>
</html>
--
Rob
