focus auf fehlerhaftes eingabefeld setzen!?

[timex]

hallo zusammen ...

ich programmiere gerade eine js-abfrage fuer ein uebliches fomular.

bei fehlerhafter eingabe werden fehlertext angezeigt. falls eingabe eines feldes ok wird der fehlertext des entsprechenden feldes wieder ausgeblendet.

das erste fehlerhafte feld des fomulars soll den focus bekommen.

hier das script ... erst einmal nur fuer den ie, der rest kommt spaeter

<script language="JavaScript" type="text/javascript">
<!--

function chkForm() {

var ok = true;

if (document.formular.vorname.value == "") {
  document.formular.vorname.focus();
  document.getElementById("vornameFehler").style.visibility = "visible";
  ok = false;
 } else {
  document.getElementById("vornameFehler").style.visibility = "hidden";
 }

if (document.formular.nachname.value == "") {
  document.formular.nachname.focus();
  document.getElementById("nachnameFehler").style.visibility = "visible";
  ok = false;
 } else {
  document.getElementById("nachnameFehler").style.visibility = "hidden";
 }

if (document.formular.datum.value == "") {
  document.formular.datum.focus();
  document.getElementById("datumFehler").style.visibility = "visible";
  ok = false;
 } else {
  document.getElementById("datumFehler").style.visibility = "hidden";
 }

if (!ok)
 return ok;

}
// -->
</script>

aufruf via <form name="formular" action="ok.html" onSubmit="return chkForm()">

problem: beim absenden des formulars springt der focus immer in die letzte eingabemoeglichkeit. was an sich auch logisch ist, aber nicht mein ziel ist. ich moechte den focus auf das erste feld setzen, dass fehlerhaft ist.

vielleicht hat jemand eine idee?!

danke im voraus fuer die hilfe.
gruss, timex.

[Tom]

Hello,

problem: beim absenden des formulars springt der focus immer in die letzte eingabemoeglichkeit. was an sich auch logisch ist, aber nicht mein ziel ist. ich moechte den focus auf das erste feld setzen, dass fehlerhaft ist.

vielleicht hat jemand eine idee?!

Erstmal müsste defineirt werden, was "fehlerhaft" ist. Aus dem JavaScript entnehme ich, dass "leer" == "fehlerhaft". Stimmt das?

Dann würde ich das auch serverseitig prüfen, denn da muss es ja ohnehin _nochmals_ überprüft werden, und dann den passenden JavaScript-String einfach in onLoad="document.formname.feldname.focus()" übergegen.

Das erspart doppeltes Testen.

Liebe Grüße aus http://www.braunschweig.de

Tom

[timex]

hallo tom,

Erstmal müsste defineirt werden, was "fehlerhaft" ist. Aus dem JavaScript entnehme ich, dass "leer" == "fehlerhaft". Stimmt das?

yepp! (ist hier fuer testzwecke, spaeter kommen dann 'richtige' ueberpruefungen der inhalte rein)

Dann würde ich das auch serverseitig prüfen, denn da muss es ja ohnehin _nochmals_ überprüft werden, und dann den passenden JavaScript-String einfach in onLoad="document.formname.feldname.focus()" übergegen.

es soll keine serverseitige ueberpruefung stattfinden wg. unnoetigem traffic. die ueberpruefung erfolgt in jedem fall clientseitig, wenn alles ok, dann weg damit und auswerten etc. deswegen ist die loesung mit dem onload auch nicht funktional.

in einem anderen forum habe ich die idee vom flag setzen bekommen, kann damit aber nichts anfangen. sagt dir das was?!

gruss, timex.

[Sorgenkind Mech]

das problem liegt einfach darin, dass alles durchlaufen wird, aber nicht beim ersten abgebrochen wird...

entweder du brichst nach dem ersten ab, oder sucht dir eine variable die beschreibt, ob beireits ein fehler gefunden wurde

in diesem beispiel wird die schleife einfach abgebrochen

hier brauchst du für neue felder übrigens nur noch das array erweitern ;)

<script language="JavaScript" type="text/javascript">
<!--

function chkForm() {

var ok = true;

var zupruefen = new Array("vorname","nachname","datum");

for(i=0;i<zupruefen.length,i++)
{
  fehlerfeld=zupruefen[i] + "Fehler";
  if (document.forms.formular[zupruefen[i]].value == "")
  {
    document.forms.formular[zupruefen[i]].focus();
    document.getElementById(fehlerfeld).style.visibility = "visible";
    ok = false;
    break;
  }
  else
  {
    document.getElementById(fehlerfeld).style.visibility = "hidden";
  }
}
if (!ok)
return ok;

}
// -->
</script>

gruß

[timex]

entweder du brichst nach dem ersten ab, oder sucht dir eine variable die beschreibt, ob beireits ein fehler gefunden wurde

ok, das ist dann wohl das, was andere unter "flag setzen"  verstehen.

hier brauchst du für neue felder übrigens nur noch das array erweitern ;)

ist klar! wenn die abfragen jetzt verschieden sind, also nicht nur value == "", sondern abfrage plz, mail, datum, etc (das uebliche eben ;-) ist die schiene via array nicht mehr moeglich, oder sehe ich das falsch?!

fragt freundlich,
timex

[Sorgenkind Mech]

entweder du brichst nach dem ersten ab, oder sucht dir eine variable die beschreibt, ob beireits ein fehler gefunden wurde

ok, das ist dann wohl das, was andere unter "flag setzen"  verstehen.

hier brauchst du für neue felder übrigens nur noch das array erweitern ;)

ist klar! wenn die abfragen jetzt verschieden sind, also nicht nur value == "", sondern abfrage plz, mail, datum, etc (das uebliche eben ;-) ist die schiene via array nicht mehr moeglich, oder sehe ich das falsch?!

fragt freundlich,
timex

sofern du bei anderen feldern wie plz auch nur drauf prüfst, ob das feld leer ist brauchst du das array nur erweitern

wenn du für bestimmte felder andere prüfungen machen willst geht das mit der schleife natürlich nicht mehr, es sei denn du erstellt ein zweidimensionales array mit dem feldnamen und der prüfung ;)

aber ich denke dein eigentliches problem sollte gelöst sein oder?

gruß

[timex]

wenn du für bestimmte felder andere prüfungen machen willst geht das mit der schleife natürlich nicht mehr

eben!

es sei denn du erstellt ein zweidimensionales array mit dem feldnamen und der prüfung ;)

aber dann wuerde ich auch hier keine vollstaendige ueberpruefung durchlaufen. der kniff ist ja, dass ich die fehlermeldungen gleichzeitig einblenden moechte. wenn ich die ueberpruefung mittendrin abbreche, werden die restlichen fehlermeldungen nicht mehr angezeigt. oder sehe ich das falsch?!

aber ich denke dein eigentliches problem sollte gelöst sein oder?

nope ...

[Sorgenkind Mech]

aber dann wuerde ich auch hier keine vollstaendige ueberpruefung durchlaufen. der kniff ist ja, dass ich die fehlermeldungen gleichzeitig einblenden moechte. wenn ich die ueberpruefung mittendrin abbreche, werden die restlichen fehlermeldungen nicht mehr angezeigt. oder sehe ich das falsch?!

nun, wie gesagt

dann unterbrichst du die überprüfung halt nicht, sondern definierst eine variable, mit der du überprüfst, ob bereits ein focus gesetzt wurde oder nicht, wenn ja, dann wird der focus halt nich neu gesetzt, aber die fehlermeldungen erscheinen trotzdem alle

die einfachste lösung stand glaube schon, in dem du die überprüfungen von hinten durchlaufen lässt

gruß

[Lanthan]

Hallo,

änder einfach die Reihenfolge der Abfragen. Die letzte Abfrage als erstes und die erste Abfrage als letztes.

mfg,
Lanthan

[timex]

Hallo,

änder einfach die Reihenfolge der Abfragen. Die letzte Abfrage als erstes und die erste Abfrage als letztes.

hrmmpf ...

[Struppi]

hier das script ... erst einmal nur fuer den ie, der rest kommt spaeter

Das was du da unten schreibst ist auch für den MZ gut.

<script language="JavaScript" type="text/javascript">
<!--

function chkForm() {

Sinnvollerweise übergibst du hier am besten direkt auch die Referenz des Formulares. Der Aufruf erfolgt so:
<form name="formular" action="ok.html" onSubmit="return chkForm(this)">

function chkForm(form) {

Dann schreibst du überall statt document.formular nur form.
Und für die einzelnen Prüfungen eine Funktion:

function chkField(form, name)
{
var el = document.getElementById(name + "Fehler");
if(form[name].value)
{
el.style.visibility = "hidden";
return null;
}
else
{
el.style.visibility = "visible";
return form[name];
}
}

So sieht das dann in Aktion aus:
function chkForm(form)
{
var focus = true;
var tmp;
tmp = chkField(form, 'vorname');
if(tmp && focus) { tmp.focus(); focus = false;}

tmp = chkField(form, 'nachname');
if(tmp && focus) { tmp.focus(); focus = false;}

tmp = chkField(form, 'datum');
if(tmp && focus) { tmp.focus(); focus = false;}

return focus;
}

Struppi.