peter_braun
Grünschnabel
Hallo,
ich bin auf der Suche nach einer Lösung zu meiner Frage wie ich mein HTML-Formular
durch JavaScript überprüfen lassen kann auf dieses Forum gestossen. Leider habe ich
jetzt nicht die richtige Lösung gefunden daher schreibe ich mal hier ein Beitrag
Also ich habe ein HTMl Formular und möchte dass durch JavaScript prüfen lassen
So dass der User bei Fehlender oder Falscher Angabe eine Fehlermeldung bekommt.
Im moment habe ich nur ein Script gefunden was am Ende der Prüfung eine Meldung
rausgibt mit allen Fehlern aufeinmal... Ich hatte mir das anders vorgestellt.
Hier ist mal der Code von meinem Formular:
Außerdem bekomme ich das nicht hin dass in den feldern bestimmte Voraussetzungen eingehalten
werden sollen bevor man das Formular absenden kann. Z.b. eMail Syntax das habe ich aber im Web
gefunden und eingebaut das funktionoiert auch einwandfrei.
Ich stelle mir das so vor:
1. Feld Anrede muss ausgewählt werden.
2. PLZ muss ausgefüllt werden und darf nur Zahlen enthalten
und eine länge von maximal 5 Zeichen beinhalten.
3. Beim Geburtsdatum sollen nur Zahlen und Punkte zählen und
so eingerichtet sein dass es folgendes Format hat: TT.MM.JJJJ
Bei Tag nur folgendes erlaubt: Tag 1-31, Monat 1-12, Jahr 1920-2006
Auch die Trennung der Punkte soll mit dem Format geregelt sein.
4. Beruf als Pflichtfeld. Es sollen keine Zahlen erlaubt sein.
5. Telefon darf nur Zahlen, Bindestrich und Schränkstrich enthalten.
6. Ich habe ein Feld mit Aktionscode. Ich stelle mir das so vor dass ich im
Script so ein Code hinterlegen kann bzw. mehrere dass man dieses Formular
nur absenden kann wenn der Aktionscode nur mit dem eingegeben übereinstimmt.
7. Bei den AGBs soll das Formular nur versendet werden wenn den AGBs zugestimmt
wurde und JA ausgewählt wurde.
Ich habe auch ein Codeschnipsel drin der bevor das Formular versendet fragt:
Alle Felder ausgefüllt? Jetzt das Formular versenden! Das kann man mit OK oder
Abbrechen beantworten. Aber geht man auf Abbrechen wird es trotzdem versandt.
Irgendwas habe ich da wohl auch falsch gemacht... Das ist wohl ein fehler
Mal nebenbei würde mich Interessieren ob es eine Möglichkeit gibt den Senden Button
einfach durch ein Bild ersetzt werden kann um das Formular zu versenden...
Und ich habe gelesen dass man mit einem CSS Code veranlassen kann das man im
Formular wenn ein feld angeklickt wurde es mit einer Farbe umrandet wird dazu habe
ich den folgenden Code gefunden funtkioniert bei mit irgendwie nicht...
Wenn ich schon bei CSS bin. Gibt es eine Möglichkeit dass wenn das
Formular dann mit JavaScript überprüft wurde und einige Felder nicht richtig
oder gar nicht ausgefüllt wurde dass auch diese felder gekennzeichnet werde?
Umrandung in Rot oder ein Hinweis so was in der Art?
Jetzt bin ich glaub ich mal alle meine Fragen los geworen. Schon jetzt Vielen
Dank an alle die mir helfen können. Zu JavaScript überprüfung habe ich einiges
gefunden aber leider nicht das richtige was ich suchte.
Danke
gruß
Peter Braun
ich bin auf der Suche nach einer Lösung zu meiner Frage wie ich mein HTML-Formular
durch JavaScript überprüfen lassen kann auf dieses Forum gestossen. Leider habe ich
jetzt nicht die richtige Lösung gefunden daher schreibe ich mal hier ein Beitrag
Also ich habe ein HTMl Formular und möchte dass durch JavaScript prüfen lassen
So dass der User bei Fehlender oder Falscher Angabe eine Fehlermeldung bekommt.
Im moment habe ich nur ein Script gefunden was am Ende der Prüfung eine Meldung
rausgibt mit allen Fehlern aufeinmal... Ich hatte mir das anders vorgestellt.
Hier ist mal der Code von meinem Formular:
Code:
<!-- Beginn Anmeldecode -->
<style type="text/css">
<!--
.Stil1 {font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}
.Stil2 {font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.stern {color: #ff0000;}
-->
</style>
<script type="text/javascript">
<!--
function checkForm() {
var strFehler='';
r=1;
if (confirm("Alle Felder ausgefüllt? Jetzt das Formular versenden!"))
if (document.forms[0].vorname.value=="")
strFehler += "Bitte tragen Sie Ihre Vornamen ein\n";
if (document.forms[0].name.value=="")
strFehler += "Bitte tragen Sie Ihre Namen ein\n";
if (!validEmail(document.forms[0].email.value)) {
strFehler += "Bitte Tragen Sie Ihre richtige eMail ein\n";
if (document.forms[0].feld3.value.length<5)
strFehler += "Bitte Tragen Sie Ihre richtige PLZ ein\n";
}
if (strFehler.length>0) {
alert("Bitte füllen Sie das Formular richtig aus! \n\n"+strFehler);
return(false);
}
}
function validEmail(email) {
var strReg = "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$";
var regex = new RegExp(strReg);
return(regex.test(email));
}
-->
</script>
<table border="0">
<form action="http://www.vid-online.eu/resp/registrieren.php" onsubmit='return checkForm();' method="POST"><input type="hidden" name="liste" value="1">
<input type="hidden" name="doppel_optin" value="inaktiv">
<tr>
<td><span class="Stil1">Anrede:<span class="stern">*</td>
<td><input type="radio" name="anrede" value="Frau"><span class="Stil1"> Frau
<input type="radio" name="anrede" value="Herr"><span class="Stil1"> Herr
</input>
</td>
</tr>
<tr>
<td><span class="Stil1">Vorname:<span class="stern">*</td>
<td><input type="Text" name="vorname" value="" size="30" ></td>
</tr>
<tr>
<td><span class="Stil1">Name:<span class="stern">*</td>
<td><input type="Text" name="name" value="" size="30" ></td>
</tr>
<tr>
<td><span class="Stil1">E-Mail:<span class="stern">*</td>
<td><input type="Text" name="email" value="" size="30" ></td>
</tr>
<tr>
<td><span class="Stil1">Straße, Nr.:<span class="stern">*</td>
<td><input type="Text" name="feld1" value="" size="22" >
<input type="Text" name="feld2" value="" size="3" maxlength="3" ></td>
</tr>
<tr>
<td><span class="Stil1">PLZ, Ort:<span class="stern">*</td>
<td><input type="Text" name="feld3" value="" size="4" maxlength="5" >
<input type="Text" name="feld4" value="" size="21">
</tr>
<tr>
<td><span class="Stil1">Geburtsdatum:<span class="stern">* </td>
<td><input type="Text" name="feld5" value="" size="10"><span class="Stil2"> Format: (TT.MM.JJJJ)</td></font>
</tr>
<tr>
<td><span class="Stil1">Berufsgruppe:<span class="stern">* </td>
<td><select name="feld6" value="" size="1" style="width:205px;">
<option value="Bitte auswählen">Bitte wählen Sie...</option>
<option value="Arbeitnehmer">Arbeitnehmer</option>
<option value="Selbständig">Selbständig</option>
<option value="Freiberuflich">Freiberuflich</option>
<option value="Schüler/Student">Schüler/Student</option>
<option value="Arbeitslos">Arbeitslos</option>
<option value="Beamter">Beamter</option>
<option value="Öffentlicher Dienst">Öffentlicher Dienst</option>
<option value="Artzt">Artzt</option>
<option value="Sonstiges">Sonstiges</option>
</select>
</tr>
<tr>
<td><span class="Stil1">Beruf:<span class="stern">*</td>
<td><input type="Text" name="feld7" value="" size="30" ></td>
</tr>
<tr>
<td><span class="Stil1">Telefon-Nr.:<span class="stern">*</td>
<td><input type="Text" name="feld8" value="" size="30" ></td>
</tr>
<tr>
<td><span class="Stil1">Aktionscode:<span class="stern">*</td>
<td><input type="Text" name="feld9" value="" size="30" ></td></tr></table>
<tr>
<td><span class="Stil1">Den AGBs von VID stimme ich zu!<span class="stern">*</td>
<td></span><input type="radio" name="feld10" value="JA">JA
<input type="radio" name="feld10" value="Nein">Nein
</input>
</td>
</tr><br><br>
<input type="Submit" name="anmeldung" value="Senden">
</form>
<!-- Ende Anmeldecode -->Außerdem bekomme ich das nicht hin dass in den feldern bestimmte Voraussetzungen eingehalten
werden sollen bevor man das Formular absenden kann. Z.b. eMail Syntax das habe ich aber im Web
gefunden und eingebaut das funktionoiert auch einwandfrei.
Ich stelle mir das so vor:
1. Feld Anrede muss ausgewählt werden.
2. PLZ muss ausgefüllt werden und darf nur Zahlen enthalten
und eine länge von maximal 5 Zeichen beinhalten.
3. Beim Geburtsdatum sollen nur Zahlen und Punkte zählen und
so eingerichtet sein dass es folgendes Format hat: TT.MM.JJJJ
Bei Tag nur folgendes erlaubt: Tag 1-31, Monat 1-12, Jahr 1920-2006
Auch die Trennung der Punkte soll mit dem Format geregelt sein.
4. Beruf als Pflichtfeld. Es sollen keine Zahlen erlaubt sein.
5. Telefon darf nur Zahlen, Bindestrich und Schränkstrich enthalten.
6. Ich habe ein Feld mit Aktionscode. Ich stelle mir das so vor dass ich im
Script so ein Code hinterlegen kann bzw. mehrere dass man dieses Formular
nur absenden kann wenn der Aktionscode nur mit dem eingegeben übereinstimmt.
7. Bei den AGBs soll das Formular nur versendet werden wenn den AGBs zugestimmt
wurde und JA ausgewählt wurde.
Ich habe auch ein Codeschnipsel drin der bevor das Formular versendet fragt:
Alle Felder ausgefüllt? Jetzt das Formular versenden! Das kann man mit OK oder
Abbrechen beantworten. Aber geht man auf Abbrechen wird es trotzdem versandt.
Irgendwas habe ich da wohl auch falsch gemacht... Das ist wohl ein fehler
Mal nebenbei würde mich Interessieren ob es eine Möglichkeit gibt den Senden Button
einfach durch ein Bild ersetzt werden kann um das Formular zu versenden...
Und ich habe gelesen dass man mit einem CSS Code veranlassen kann das man im
Formular wenn ein feld angeklickt wurde es mit einer Farbe umrandet wird dazu habe
ich den folgenden Code gefunden funtkioniert bei mit irgendwie nicht...
Code:
<style type="text/css">
<!--
input:hover, input:active, input:focus,
select:hover, select:active, select:focus
textarea:hover, textarea:active, textarea:focus {
background-color: #F3F1F4;
border: 3px solid #ccc;
}
-->
</style>Wenn ich schon bei CSS bin. Gibt es eine Möglichkeit dass wenn das
Formular dann mit JavaScript überprüft wurde und einige Felder nicht richtig
oder gar nicht ausgefüllt wurde dass auch diese felder gekennzeichnet werde?
Umrandung in Rot oder ein Hinweis so was in der Art?
Jetzt bin ich glaub ich mal alle meine Fragen los geworen. Schon jetzt Vielen
Dank an alle die mir helfen können. Zu JavaScript überprüfung habe ich einiges
gefunden aber leider nicht das richtige was ich suchte.
Danke
gruß
Peter Braun
Zuletzt bearbeitet:
