Überprüfung Formularfeld

Spider67

Hallo,

ich habe Probleme mit der Überprüfung von Formularfeldern.

Ich lade hier den Code und das dazugehörende CSS hoch.

Ich möchte gerne, dass Formularfelder wenn Sie gültig befüllt sind einen grünen Hintergrund bekommen und wenn sie ungültig sind einen roten Hintergrund. Das funktioniert auch bei vielen Feldern (zb Name, Vorname, Beruf, etc.). Bei Der Telefonnummer funkt es jedoch nicht. Hier wird das Feld auch bei korrekter Formateingabe rot und nicht grün.

Wo liegt also der Fehler?

Danke für die Hilfe.

formular.txt formular_css.txt

basti1012

so kann dir keiner helfen.

Erstens sollte man keine Datein anhängen weil die kaum einer runterladen tut.
Wenn dann hier den Code posten oder eine Fiddle fertig machen.

Ich habe mir die Datein trotzdem angekuckt und komme trotzdem nicht weiter.
Du hast da ein Script mit drinne was ich nicht kenne , und wenn ich den Code von den Script nicht habe kann ich nur raten wie das Script arbeitet. Hast du mal den Link zu den Script? Oder irgendein Link zur Homepage des Scriptes.

EDIT: Habe das Script gefunden. Die Phonummer kann nur falsch sein weil die wahrscheinlich nach den amerikanischen Format sucht. Du mußt in der Api den regex auf deutsche format ändern dann geht es auch

Spider67

Hallo,

sorry, ich wollte nicht den ganzen Code posten. Danke für Dein Hilfe. Ich bin Autodidakt und ziemlicher Anfänger. Kannst Du mir vielleicht helfen und mir sagen, welche Codezeilen ich ändern muss, damit das funktioniert? Muss ich das in der Java Script Datei ändern, oder wo? Ich muss noch ergänzend hinzufügen, dass ich fertige Widgets aus Dreamweaver CS 6 für die Formularfelder nutze (Spry Widget heißen die Dinger).
Danke für die Hilfe.

Gastl

Zitat von Spider67

Hallo,

sorry, ich wollte nicht den ganzen Code posten.

Wenn man Hilfe wünscht, muss man schon die Hose runterlassen.

Spider67

HTML

<!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>Anmeldeformular</title>
<style type="text/css">
#form1 table tr td #Mitglied {
 text-align: center;
}
.Name {
 width: 250px;
}
.Ort {
 width: 350px;
}
.Land {
 width: 400px;
}
#form1 div table tr td {
 text-align: center;
 font-weight: bold;
 font-size: ;
}
body {
 background-image: url(../bilder/2011_hintergrund_1.png);
 background-size: cover;
 height: 100%; width: 100%; 
 }
.Größe {
 font-size: xx-large;
 text-decoration: underline;
}
</style>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
</head><body>
<form action="Anwendungen/myFormMail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onreset="return deleteForm();" onsubmit="return submitForm();" style="page-break-inside:avoid">
 
  <p><br />
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div align="center">
    <table width="813" border="1">
      <tr>
        <td height="45" colspan="3" class="Größe">Antragsformular</td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td width="266"><div align="center">Aufnahme ab (Datum/Jahr)</div></td>
        <td width="275"><div align="center">Außerordentliches Mitglied</div></td>
        <td width="250"><div align="center">Alter</div></td>
      </tr>
      <tr>
        <td><div align="center">
          <span id="sprytextfield1">
          <input type="text" name="Aufnahme " id="Aufnahme " required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span><span class="textfieldInvalidFormatMsg">Ungültiges Format.</span></span></div></td>
        <td><div align="center"><span id="sprycheckbox1">
          <input type="checkbox" name="Mitglied2" id="Mitglied" />
          <label for="Mitglied"></label>
        </span></div></td><td><input type="radio" name="Alter" value="über 14" id="Alter_0" />
        über 14 Jahre
        <input type="radio" name="Alter" value="unter 14" id="Alter_1" />
        unter 14 Jahre</td>
      </tr>
      <tr>
        <td><div align="center">Nachname, Vorname</div></td>
        <td><div align="center">Geburtsdatum</div></td>
        <td><div align="center">Geburtsort</div></td>
      </tr>
      <tr>
        <td><div align="center"><span id="sprytextfield2">
          <input name="Name" type="text" class="Name" id="Name" required/>
          <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span></span></div>
        </td>
        <td><div align="center"><span id="sprytextfield3">
        <input type="text" name="Geburtsdatum" id="Geburtsdatum" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span><span class="textfieldInvalidFormatMsg">Ungültiges Format.</span></span></div></td>
        <td><div align="center"><span id="sprytextfield4">
          <input name="Geburtsort" type="text" class="Name" id="Geburtsort" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span></span></div></td>
      </tr>
      <tr>
        <td><div align="center">Straße, Hausnummer</div></td>
        <td colspan="2"><div align="center">PLZ, Ort</div> 
        <div align="center"></div></td>
      </tr>
      <tr>
        <td><div align="center"><span id="sprytextfield5">
          <input name="Adresse" type="text" class="Name" id="Adresse" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span></span></div></td>
        <td colspan="2"><div align="center"><span id="sprytextfield6">
          <input name="Ort" type="text" class="Ort" id="Ort" required/>
          <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span></span></div>
          <div align="center"></div></td>
      </tr>
      <tr>
        <td><div align="center">Staatsangehörigkeit</div></td>
        <td><div align="center">Beruf</div></td>
        <td><div align="center">Telefonnumer</div></td>
      </tr>
      <tr>
        <td><div align="center"><span id="sprytextfield7">
          <input type="text" name="Staat" id="Staat" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span></span></div></td>
        <td><div align="center"><span id="sprytextfield8">
          <input name="Beruf" type="text" class="Name" id="Beruf" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span></span></div></td>
        <td><div align="center"><span id="sprytextfield9">
        <input type="text" name="Telefonnummer" id="Telefonnummer" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span><span class="textfieldInvalidFormatMsg">Ungültiges Format.</span></span></div></td>
      </tr>
      <tr>
        <td><div align="center">E-Mail Adresse</div></td>
        <td><label for="KFZ Kennzeichen">
          KFZ Kennzeichen
          </label><div align="center"></div>
        </label></td>
        <td><label for="Handynummer">Handynummer</label></td>
      </tr>
      <tr>
        <td><div align="center"><span id="sprytextfield3">
        <input type="text" name="Mail" id="Mail" />
        </span></div></td>
        <td><div align="center">
          <input type="text" name="KFZ Kennzeichen" id="KFZ Kennzeichen" />
        </div></td>
        <td><span id="sprytextfield5">
        <input name="Handynummer" type="text" class="Name" id="Handynummer" />
        </span></td>
      </tr>
      <tr>
        <td colspan="2">1. Ich habe Erfahrung als Sportfischer.</td>
        <td><p>
          <label>
            <input type="radio" name="Erfahrungen" value="ja" id="Erfahrungen_0" required/>
            ja</label>
          <label>
            <input type="radio" name="Erfahrungen" value="nein" id="Erfahrungen_1" required/>
            nein</label>
          <br />
        </p></td>
      </tr>
      <tr>
        <td colspan="2">2. Ich bin wegen Jagd- oder Fischereivergehen vorbestraft.</td>
        <td><p>
          <label>
            <input type="radio" name="Vergehen" value="ja" id="Vergehen_0" required/>
            ja</label>
          <label>
            <input type="radio" name="Vergehen" value="nein" id="Vergehen_1" required/>
            nein</label>
          <br />
        </p></td>
      </tr>
      <tr>
        <td colspan="2">3. Ich habe die Fischereiprüfung bestanden (Kopie der Karte/Erlagschein liegen bei)</td>
        <td><p>
          <label>
            <input type="radio" name="Pr&uuml;fung" value="ja" id="Prüfung_0" required/>
            ja</label>
          <label>
            <input type="radio" name="Pr&uuml;fung" value="nein" id="Prüfung_1" required/>
            nein</label>
          <br />
        </p></td>
      </tr>
      <tr>
        <td colspan="2">4. Ich wurde aus einem anderen Verein ausgeschlossen.</td>
        <td><p>
          <label>
            <input type="radio" name="Verein" value="ja" id="Verein_0" required/>
            ja</label>
          <label>
            <input type="radio" name="Verein" value="nein" id="Verein_1" required/>
            nein</label>
          <br />
        </p></td>
      </tr>
      <tr>
        <td colspan="2">5. Ich war schon Mitglied im Fischereiverein Klein Meiseldorf.</td>
        <td><p>
          <label>
            <input type="radio" name="Mitglied" value="ja" id="Mitglied_0" required/>
            ja</label>
          <label>
            <input type="radio" name="Mitglied" value="nein" id="Mitglied_1" required/>
            nein</label>
          <br />
        </p></td>
      </tr>
      <tr>
        <td colspan="2">6. Ich war Mitglied im Angelverein (Name)</td>
        <td><label for="Name Verein"></label>
        <input name="Name Verein" type="text" class="Ort" id="Name Verein" /></td>
      </tr>
      <tr>
        <td colspan="3">Mir ist bekannt, dass unwahre Angaben zum Vereinsausschluss bzw. zur Ablehnung des Antrages führen.</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Datum</td>
        <td colspan="2">Bei Minderjährigen ist die Zustimmung eines Erziehungsberechtigten erforderlich.</td>
      </tr>
      <tr>
        <td><label for="Datum"></label>
          <span id="sprytextfield10">
          <input type="text" name="Datum" id="Datum" required/>
        <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span><span class="textfieldInvalidFormatMsg">Ungültiges Format.</span></span></td>
        <td><label for="Ablehnung">Elternteil stimmt nicht zu</label>
        <input type="checkbox" name="Ablehnung" id="Ablehnung" /></td>
        <td><label for="Zustimmung">Elterrnteil stimmt zu</label>
        <input type="checkbox" name="Zustimmung" id="Zustimmung" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">Jahresbeitrag außerordentliches Mitglied</td>
        <td>Euro 525,00</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Dateianhang</td>
        <td colspan="2"><label for="Fischerkarte">Fischerkarte/Zahlschein</label>
          <input type="file" name="Fischerkarte" id="Fischerkarte" required/></td>
      </tr>
      <tr>
        <td>Kommentar/Anmerkungen</td>
        <td colspan="2"><label for="Kommentar"></label>
        <textarea name="Kommentar" cols="70" rows="8" id="Kommentar"></textarea></td>
      </tr>
      <tr>
        <td><input type="submit" name="button" id="button" value="Senden" /></td>
        <td><input type="button" name="Drucken" id="Drucken" value="Drucken" onClick="print()"/></td>
        <td><input type="reset" name="button2" id="button2" value="Zurücksetzen" /></td>
      </tr>
    </table>
  </div>
  <p>&nbsp;</p>
  <p><br />
  </p>
</form>
<script type="text/javascript">
function deleteForm() {
    return confirm('Formular zurücksetzen?');
}function submitForm() {
        return confirm('Formular senden?');
    }
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {validateOn:['change'], format:"dd.mm.yyyy"});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:['change']});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "date", {format:"dd.mm.yyyy", validateOn:['change']});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {validateOn:['change']});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {validateOn:['change']});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {validateOn:['change']});
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "none", {validateOn:['change']});
var sprytextfield8 = new Spry.Widget.ValidationTextField("sprytextfield8", "none", {validateOn:['change']});
var sprytextfield9 = new Spry.Widget.ValidationTextField("sprytextfield9", "phone_number", {format:"phone_custom", pattern:"02984/1234", validateOn:['change']});
var sprytextfield10 = new Spry.Widget.ValidationTextField("sprytextfield10", "date", {format:"dd.mm.yyyy", validateOn:['change']});
</script>
</body>
</html>


Bitte sehr, ich wollte deshalb den Code nicht posten, weil er so lang ist, nicht weil ich zu faul bin.

Alles anzeigen

- - - Aktualisiert - - -

Und hier noch das CSS dazu:

HTML

@charset "UTF-8";/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 *//* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
 display: none;
}/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
 display: inline;
 color: #CC3333;
 border: 1px solid #CC3333;
}/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
 background-color: #B8F5B1;
}/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
 background-color: #FF9F9F;
}/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
 background-color: #FFFFCC;
}/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
 color: red !important;
}/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
 /*color: red !important;*/
}

Alles anzeigen

Vielleicht kann mir jemand sagen, wo der fehler liegt, bzw. wo ich den Code ändern muss.

Danke vorab.

basti1012

Regex ist überhaupt nicht mein fall. Vieleicht kann dir das einer richtig einstellen.
Ich habe das jetzt so eingestellt das er auf nummern reagiert und wenn da was anderes steht zeigt er falsch an.

Das komische ist wennich den regex online teste reagiert er auch auf leerzeichen und / ,so wie telefonnumern halt sind.
Im Script funktioniert es so nicht mehr. Könnte sein das im Script an einer anderen stelle nochmal an den regex rum gespielt wird. Da das script über 2000 Zeilen hat werde ich das bestimmt nicht komplett durchsuchen.

also wie gesagt bei zahlen ist grün bei buchstaben rot. Wenn es richtig gemacht werden soll must du mal rumfragen wer dir da den richtigen regex einbaut

http://sebastian1012.bplaced.net/homepagebasti1…18/formular.php

Spider67

Hallo,

danke mal. Was hast Du jetzt gegenüber meinem Code geändert, damit bei Zahlen ein grünes Feld erscheint? Bei mir ist ja noch immer auch bei Zahleneingabe ein rotes Feld.

Danke für Deine Hilfe.

basti1012

die api geändert

Teste die erstmal mit einbinden http://sebastian1012.bplaced.net/homepagebasti1…ionTextField.js

Wenn es geht dann kopier den Code daraus und speicher dir den ab.(Nicht mehr meinen Link einbinden weil ) Ich schmeise das irgendwann wieder von meinen Webserver runter und dann geht es bei dir nicht mehr.

Spider67

Hallo,

vielen Dank. Ich werde das abends testen. Kannst Du mir vielleicht noch sagen, was (welche Codezeilen) Du geändert hast, damit ich weiß woran es gelegen hat?

Danke vorab und LG aus Österreich.

basti1012

Das weiß ich gar nicht mehr genau. Dazu müßte ich noch mal genauer kucken. Habe die Originale Js auch nicht mehr.
Aber Von Zeile 150 bis 500 ,sind die ganzen validierungen wo die richtigen angaben getestet werden. Da steht ja auch url,,email,und so weiter. Irgendwo steht da phon nummer und da mußt du mal einen suchen der dir eine richtige Regex abfrage da rein setz , dann kannst du die Telefonnumern noch genau eingrenzen. Obwohl ich der Meinung bin das Zahlen reichen. Habe es zwar auch / und leerzeichen versucht aber geht irgendwie nicht. Irgendwo im Script wird da bestimmt nochmal drauf zugefriffen. Wie gesagt um das richtig zumachen muß man den regex kram richtig verstehen.

Spider67

Danke nochmals für Dein Hilfe. Ich habe das jetzt getestet. Wenn ich Deine API einbinde, wird keine einziges Formularfeld mit grün. Ich muss warten, ob noch jemand antwortet, der da durchblickt. Ich habe jetzt mal das Formularfeld gegen ein normales Textfeld ausgetauscht, damit die Fehlermeldung weg ist.

Mal sehen ob da noch wer antwortet. Ich habe jetzt noch was getestet: Ich habe die Seite ja mit Dreamweaver erstellt (Hoffentlich schimpfst Du jetzt nicht ;-);-)). Nur wenn ich als Format für die Überprüfung "Telefonnummer" eingebe, funktioniert es nicht. Ich habe jetzt "benutzdefiniert eingegeben und ein Format "freihändig" erfasst, da funkt es und das Feld wird grün - auch mit /.

Das genügt für meine Zwecke. Anscheinend wird hier wirklich im Hintergrund das amerikanische Nummernsystem abgefragt. Aber wie gesagt, wo man das in der js. ändert steht in den Sternen.

Danke jedenfalls für die Hilfe.

basti1012

In so ein fall würde ich es mir lieber selber bauen. Erstens weißt du dann wo was und wofür es ist und man brauch wenniger Code. Die Api hat weit über 2000 Zeilen und für den Effekt was du haben willst reichen vieleicht 100 Zeilen Code. Da sollte man immer kucken wie fit man in welchen sachen ist und ob es sich überhaupt lohnt die Seite mit Apis und Bibiliotheken voll zu proppen.

Warum das bei dir mit der von mir api nicht geht weiß ich auch nicht ,ich denke mal das du im Quelltext auch nicht alles geändert hast was ich geändert habe. Weil du siehst ja bei mir das es geht.
Aber das ist ja jetzt Wurscht, da es jetzt bei dir geht ist doch gut. Dann sollte man da auch nicht mehr dran rum fummeln und es so lassen.

Tags