Formularfeldüberprüfung

  • Guten Morgen,


    ich habe folgendes Formular auf meiner Seite bereit gestellt:


    <!doctype html> <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="4" class="Größe">Antragsformular</td> </tr> <tr> <td colspan="4">&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" colspan="2"><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 colspan="2"><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 colspan="2"><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></div></td> <td colspan="2"><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="3"><div align="center">PLZ, Ort</div> <div align="center"></div></td> </tr> <tr> <td class="textfieldRequiredMsg"><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="3"><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 colspan="2"><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>


    der 2. Teil vom Code folgt gleich:


    Nunmehr war ich der Meinung, dass bei allen Formularfeldern nach einer korrekten Eingabe ein grüner Hintergrund erscheint. Dies funktioniert jedoch nicht bei allen Feldern. Beim Feld NAme klappt es, beim Feld Telefonnummer nicht (dieses wird trotz korrekter Eingabe rot).


    Ich bin schon verzweifelt. Woran liegt das? Danke für Eure Hilfe.

  • Geronimo

    Hat das Thema freigeschaltet
  • Hallo Spider67,

    aus Mangel des 2-ten Teils, ich denke dies sollte evtl. die Javascript und CSS Datei sein, kann hier nur geraten werden. Es wäre schön, wenn der html Part geordnet und eingerückt wär.

    Dann rate ich mal. Vielleicht liegt der Ursprung des Scriptes (SpryValidationTextField.js) in Amerika und prüft ob die Telefon Nr. 10 Zahlen enthält. Die ersten drei (123) kennzeichnen die Region in dem Staat und jeder Staat hat mehrere davon. Die nächsten drei (456) für den Stadtteil, die letzten vier (7890) für die eigentliche Nummer.

    Gruß HMV

  • Hallo Spider67,


    wie vermutet wird in der js Datei eine Überprüfung auf eine 10 stellige US-Telefonnummer vorgenommen. Eine Einhaltung des sog. Patterns (pattern:'(000) 000-0000') wie in der js Datei vorgegeben scheint nicht zu funktionieren.


    Schalte die Überprüfung der Telefon-Nr. doch einfach wie folgt ab. Bei der Mobil Nr. wird ja auch nicht geprüft.

    Ändere in der html Datei folgenden Part

    Code
    1. <td><div align="center"><span id="sprytextfield9">
    2. <input type="text" name="Telefonnummer" id="Telefonnummer" required/>
    3. <span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span><span class="textfieldInvalidFormatMsg"        >Ungültiges Format.</span></span></div></td>

    zu -->

    Code
    1. <td><div align="center">
    2. <input type="text" name="Telefonnummer" id="Telefonnummer" required/>
    3. </div></td>

    Gruß HMV