Überprüfung von Formularfeld von diggy, 10.07.2008 11:39

Überprüfung von Formularfeld

diggy 10.07.2008 11:39

javascript

Hallo,

ich hab eein kleines Problem, meien Formularfelder sollen vor dem Absenden überprüft werden. Wenn nicht alles ausgefüllt ist komtm eine Fehlermeldung.
Nun habe ich durch onclick events ein Teil des Feldes versteckt. Es soll aber nur der angezeigte teil überprüft werden. Kann mir jeamdn weiterhelfen? ich habe schon den Ansatz drin das Formular in 2 aufzuspalten, doch irgendwas fehlt noch. Hier der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zeitungslager</title>
<script language="JavaScript">
<!--
function umschalten(radio_value) {
// einzeiliger Kommentar
/*
mehrzeiler Komm.
*/

if (radio_value=="1") {
  document.getElementById("bereich1").style.display='inline';
  document.getElementById("bereich2").style.display='none';
}  else {
  document.getElementById("bereich1").style.display='none';
  document.getElementById("bereich2").style.display='inline';
}
}

function chkFormularHaupt () {
  if (radio_value=="1") {
  chkFormular ();
  chkFormular1 ();
  }  else {
  chkFormular ();
  chkFormular2 ();
  }
}

function chkFormular () {
  if (document.Formular.Besteller.value == "") {
    alert("Bitte den Besteller eingeben!");
    document.Formular.Besteller.focus();
    return false;
  }
  if (document.Formular.Telefonnummer.value == "") {
    alert("Bitte Ihre Telefonnummer eingeben!");
    document.Formular.Telefonnummer.focus();
    return false;
  }

}
function chkFormular1 ()  {
  if (document.Formular.Vorname.value == "") {
    alert("Bitte Ihren Vornamen eingeben!");
    document.Formular.Vorname.focus();
    return false;
  }

if (document.Formular.Nachname.value == "") {
    alert("Bitte Ihren Nachnamen eingeben!");
    document.Formular.Nachname.focus();
    return false;
  }

if (document.Formular.Strasse.value == "") {
    alert("Bitte Ihre Straße eingeben!");
    document.Formular.Strasse.focus();
    return false;
  }

if (document.Formular.Plz.value == "") {
    alert("Bitte Ihre Plz eingeben!");
    document.Formular.Plz.focus();
    return false;

}

if (document.Formular.Ort.value == "") {
    alert("Bitte Ihren Ort eingeben!");
    document.Formular.Ort.focus();
    return false;

}
}
function chkFormular2 () {

if (document.Formular.Empfänger.value == "") {
    alert("Bitte Ihren Namen eingeben!");
    document.Formular.Empfänger.focus();
    return false;

}

if (document.Formular.Hauptabteilung.value == "") {
    alert("Bitte Ihre Abteilung eingeben!");
    document.Formular.Hauptabteilung.focus();
    return false;

}

if (document.Formular.Unterabteilung.value == "") {
    alert("Bitte Ihre Unterabteilung eingeben!");
    document.Formular.Unterabteilung.focus();
    return false;

}

if (document.Formular.Gebäude.value == "") {
    alert("Bitte Ihr Gebäude eingeben!");
    document.Formular.Gebäude.focus();
    return false;

}

if (document.Formular.Raumnummer.value == "") {
    alert("Bitte Ihre Raumnummer eingeben!");
    document.Formular.Raumnummer.focus();
    return false;

}

}
-->
</script>

</head>
<body text="#CC3300" bgcolor="#CCD9CC">

<p align="center" class="Stil1">Bestellung von Zeitungsexemplaren über das Zeitungslager</p>
<p align="center" class="Stil1"><em>Auswahl der Anforderung</em></p>
<form name="Formular" onsubmit="return chkFormularHaupt()">

<input type="radio" name="schalter" value="1" onClick="umschalten(1)" checked> <font face="Verdana, Arial, Helvetica, sans-serif"><strong>Bestellung für Kunden (hausextern)</strong></font>
<input type="radio" name="schalter" value="0" onClick="umschalten(0)"> <strong><font face="Verdana, Arial, Helvetica, sans-serif">Bestellung für Mitarbeiter (hausintern)</font></strong>

<pre>
</pre>
  <table width="200" border="0">
    <tr>
      <td><label><span class="Stil3">Besteller</span>
        <input type="text" name="Besteller" id="Besteller" />
      </label></td>
      <td><label><span class="Stil3">Telefonnummer</span>
          <input type="text" name="Telefonnummer" id="Telefonnummer"/>
      </label></td>
    </tr>
  </table>
  <p> </p>
  <p> </p>

<label><span class="Stil5">Bestellung für Kunden</span><br />
  <br />
  </label>
  <table width="893" border="0">
    <tr>
      <td width="144"><span class="Stil3">Vorname</span>
      <input type="text" name="Vorname" id="Vorname" /></td>
      <td width="144"><span class="Stil3">Nachname</span>
      <input type="text" name="Nachname" id="Nachname" /></td>
      <td width="144"><span class="Stil3">Strasse</span>
      <input type="text" name="Strasse" id="Strasse" /></td>
      <td width="144"><span class="Stil3">Plz</span><br />
      <input type="text" name="Plz" id="Plz" /></td>
      <td width="144"><span class="Stil3">Ort</span>
      <input type="text" name="Ort" id="Ort" /></td>
    </tr>
  </table>
   <p><span class="Stil3">Rechnung erstellen?</span>
     <input type="checkbox" name="Rechnung" id="Rechnung" /></p>
  <label><br />
  </label>
</div>
<p>
<div id="bereich2" style="display:none;">

<label><span class="Stil5">Bestellung für Mitarbeiter</span><br />
  <br />
  </label>
  <table width="893" border="0">
    <tr>
      <td width="144"><span class="Stil3">Empfänger</span>
      <input type="text" name="Empfänger" id="Empfänger" /></td>
      <td width="144"><span class="Stil3">Hauptabteilung</span>
      <input type="text" name="Hauptabteilung" id="Hauptabteilung" /></td>
      <td width="144"><span class="Stil3">Unterabteilung</span>
      <input type="text" name="Unterabteilung" id="Unterabteilung" /></td>
      <td width="144"><span class="Stil3">Gebäude</span>
      <input type="text" name="Gebäude" id="Gebäude" /></td>
      <td width="144"><span class="Stil3">Raumnummer</span>
      <input type="text" name="Raumnummer" id="Raumnummer" /></td>
    </tr>
  </table>
  <p> </p>
  <label><br />
  </label>
  <label></label>
</div>

</pre>

<h4 align="justify" class="Stil1"> <em>Auswahl der benötigten Exemplare</em></h4>
  <label><span class="Stil3">Titel</span>
  <select name="Titel" id="Titel">
    <option>WAZ</option>
    <option>NRZ</option>
    <option>WP</option>
    <option>WP</option>
    <option>ZGT</option>
  </select>
  </label>
  <label><span class="Stil3">Ausgabe</span>
  <select name="Ausgabe" id="Ausgabe">
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
  </label>
  <label><span class="Stil3">Erscheinungstag</span>
  <input name="Tag" type="text" id="Tag" size="2" maxlength="2" />
  <input name="Monat" type="text" id="Monat" size="2" maxlength="2" />
  </label>
  <label>
  <input name="Jahr" type="text" id="Jahr" size="2" maxlength="4" />
  </label>
  <label><span class="Stil3">Anzahl</span>
  <input name="Anzahl" type="text" id="Anzahl" size="4" maxlength="4" />
  </label>

</form>

</body>

</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Überprüfung von Formularfeld
Beat Homepage des Autors 10.07.2008 12:19

javascript
– Informationen zu den Bewertungsregeln
Hallo,

ich hab eein kleines Problem, meien Formularfelder sollen vor dem Absenden überprüft werden.

Schlechter Ansatz, weil ich ohne Javascript surfe.
Überprüfung soll auf dem Server geschehen mit der Serversprache deiner Wahl.
Begnüge dich darin, mit Java-Script die Eingabe zu erleichtern, und allenfalls Tipps für valide Eingaben zu geben.

Wenn nicht alles ausgefüllt ist komtm eine Fehlermeldung.

Definiere 'ausgefüllt'. Kurzerhand Schrott einfüllen kann jeder.

Nun habe ich durch onclick events ein Teil des Feldes versteckt.

Ein Feld ist bezüglich Inhalt nicht etwas, das sich unterteilen und verstecken liesse. Du kannst höchstens CSS Schabernack betreiben.
Vielleicht meinst du aber: Du blendest einen Teil der Felder des Formulars aus. Schätze den Vorzug eines hinreichend korrekten Deutschen Ausdrucks.

Es soll aber nur der angezeigte teil überprüft werden.

Dann integriere in dein Script eine Überprüfung, ob du die CSS Eigenschaft display:none gesetzt hast.

Kann mir jeamdn weiterhelfen? ich habe schon den Ansatz drin das Formular in 2 aufzuspalten, doch irgendwas fehlt noch.

Teilung in zwei Formulare bedeutet, dass entweder ein submit für das eine, oder für das andere Formular ausgelöst wird.

mfg Beat

--
Woran ich arbeite:
X-Torah
                 /|
  <°)))o><      / |    /|
            ---- _|___/ |     ><o(((°>
           OvVVvO    __ |         ><o(((°>
<°)))o><  /v    v\/  |
<°)))o>< ^    ^/_/_         ><o(((°>
           ^^^^/___/
><o(((°>    ----       ><o(((°>
   <°)))o><                      ><o(((°>o
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Überprüfung von Formularfeld
  
  molily Homepage des Autors 10.07.2008 13:24
  
  javascript
  – Informationen zu den Bewertungsregeln
  Hallo,
  
  Ein Feld ist bezüglich Inhalt nicht etwas, das sich unterteilen und verstecken liesse. Du kannst höchstens CSS Schabernack betreiben.
  Vielleicht meinst du aber: Du blendest einen Teil der Felder des Formulars aus. Schätze den Vorzug eines hinreichend korrekten Deutschen Ausdrucks.
  
  ??? Was soll denn die Spitzfindigkeit?
  Wenn ich ein Formularfeld mit display:none formatiere, verstecke ich es. Was hast du daran auszusetzen?
  
  Mathias
  
  --
  SELFHTML aktuell Weblog
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Überprüfung von Formularfeld
    
    Beat Homepage des Autors 10.07.2008 13:37
    
    javascript
    
    – Informationen zu den Bewertungsregeln
    Ein Feld ist bezüglich Inhalt nicht etwas, das sich unterteilen und verstecken liesse. Du kannst höchstens CSS Schabernack betreiben.
    Vielleicht meinst du aber: Du blendest einen Teil der Felder des Formulars aus. Schätze den Vorzug eines hinreichend korrekten Deutschen Ausdrucks.
    
    ??? Was soll denn die Spitzfindigkeit?
    Wenn ich ein Formularfeld mit display:none formatiere, verstecke ich es. Was hast du daran auszusetzen?
    
    Wie interpretierst du den Satz:
    
    Nun habe ich durch onclick events ein Teil des Feldes versteckt.
    
    Wie reagierst du auf einen solchen Satz?
    Was stellst du dir vor, wenn du ihn wörtlich nimmst? (einen Teil des Feldes verstecken = einen Teil des Feldinhaltes irgendwie abdecken? Oder mit JS, einen Teil des Feldinhaltes löschen und irgendwo sonst wegspeichern?).
    
    Es liegt keine Spitzfindigkeit darin, die vermutete Intention des OP dann darzustellen, sondern reines Entgegenkommen.
    
    mfg Beat
    
    --
    Woran ich arbeite:
    X-Torah
    <°)))o>< ><o(((°>o
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Überprüfung von Formularfeld
      
      molily Homepage des Autors 10.07.2008 13:43
      
      javascript
      
      – Informationen zu den Bewertungsregeln
      
      Hallo,
      
      Nun habe ich durch onclick events ein Teil des Feldes versteckt.
      
      Wie reagierst du auf einen solchen Satz?
      
      Meine automatische Fehlerkorrektur macht »einen Teil der Felder« daraus.
      
      Mathias
      
      --
      SELFHTML aktuell Weblog
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
Überprüfung von Formularfeld
molily Homepage des Autors 10.07.2008 13:41

javascript
+1 Informationen zu den Bewertungsregeln
Hallo,

Nun habe ich durch onclick events ein Teil des Feldes versteckt. Es soll aber nur der angezeigte teil überprüft werden.

Das hast du schon grundsätzlich heraus: Speichere in einer globalen Variable, welcher Teil gerade angezeigt wird.

Am Anfang:
var angezeigterBereich = 1;

Dann in in der Funktion umschalten notierst du angezeigterBereich = 1 bzw. angezeigterBereich = 2. In der Funktion chkFormularHaupt fragst du die Variable ab.

Das tust du ja schon im Grunde (bei dir heißt die Variable radio_value):

function chkFormularHaupt () {
  if (radio_value=="1") {

Das Problem ist, dass radio_value hier nicht verfügbar ist, weil es eine lokale Variable aus der Funktion umschalten ist, die nach deren Ausführung verfällt. Du musst sie http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=global deklarieren.

<style type="text/css">

</style>

CSS hast du anscheinend noch nicht richtig verstanden. Der Sinn von CSS ist die Verwendung von passenden HTML-Elementen und deren effiziente Formatierung sowie die Vererbung von Formatierungen. Du kennst offenbar nur die Klassen-Selektoren. Klassen brauchst du in deinem Beispielcode aber gar nicht. Das geht viel einfacher! Soviel Arbeit musst du dir gar nicht machen.

<p align="center" class="Stil1">Bestellung von Zeitungsexemplaren über das Zeitungslager</p>

Das ist eine Überschrift, die du mit h1 auszeichnen könntest.

<p align="center" class="Stil1"><em>Auswahl der Anforderung</em></p>

Hier eine h2

<input type="radio" name="schalter" value="1" onClick="umschalten(1)" checked> <font face="Verdana, Arial, Helvetica, sans-serif"><strong>Bestellung für Kunden (hausextern)</strong></font>

font-Elemente sind so 1995! Wirf sie heraus und formatiere den Text mit Stylesheets.

<td><label><span class="Stil3">Besteller</span>
        <input type="text" name="Besteller" id="Besteller" />
      </label></td>

Anstatt <span class="Stil3"> kannst du einfach das label-Element im CSS formatieren.

<p> </p>
  <p> </p>

Abstände werden in CSS mit der Eigenschaft margin gelöst.

<label><span class="Stil5">Bestellung für Kunden</span><br />
  <br />
  </label>

Das ist kein Label - sondern schon wieder eine Überschrift.

<label><span class="Stil5">Bestellung für Mitarbeiter</span><br />
  <br />
  </label>

Dito.

<td width="144"><span class="Stil3">Empfänger</span>
      <input type="text" name="Empfänger" id="Empfänger" /></td>
      <td width="144"><span class="Stil3">Hauptabteilung</span>
      <input type="text" name="Hauptabteilung" id="Hauptabteilung" /></td>
      <td width="144"><span class="Stil3">Unterabteilung</span>
      <input type="text" name="Unterabteilung" id="Unterabteilung" /></td>
      <td width="144"><span class="Stil3">Gebäude</span>
      <input type="text" name="Gebäude" id="Gebäude" /></td>
      <td width="144"><span class="Stil3">Raumnummer</span>
      <input type="text" name="Raumnummer" id="Raumnummer" /></td>

Die ganzen spans mit Stil3 sind überflüssig. Das lässt sich alles über ein paar zentrale CSS-Formatierungsregeln mit passenden Selektoren erschlagen. Damit sparst du dir Unmengen an Tipparbeit, der Code wird aufgeräumter und du kannst die Formatierung zentral ausgelagern und einfach ändern.

<p> </p>
  <label><br />
  </label>
  <label></label>

Das ist anscheinend Codemüll.

</div>

</pre>

pre??

<h4 align="justify" class="Stil1"> <em>Auswahl der benötigten Exemplare</em></h4>

Immerhin, eine Überschrift, wenn auch h4 dort nicht passt. Wenn ich mir dein Dokument so anschaue, gibt es eher viele Überschriften zweiter Ordnung.

h4 heißt Überschrift vierter Ordnung (das schließt ein: es gibt auch Überschriften erster, zweiter und dritter Ordnung) und bedeutet nicht die Schriftgröße. Die sollte per CSS gesetzt werden (font-size), genauso wie align=justify und em sind hier auch fehl am Platze.

Mathias

--
SELFHTML aktuell Weblog
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

diggy: Überprüfung von Formularfeld