# HTML-Formular durch JavaScript Prüfen



## peter_braun (31. Juli 2006)

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:


```
<!-- 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">&nbsp;Frau
         <input type="radio" name="anrede" value="Herr"><span class="Stil1">&nbsp;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">*&nbsp;</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">*&nbsp;</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>&nbsp;
     <td></span><input type="radio" name="feld10" value="JA">JA &nbsp;
         <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...


```
<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


----------



## tobee (31. Juli 2006)

> ....Ich hatte mir das anders vorgestellt.


Ich würde dir ja gerne helfen, aber wie hast *du* es dir denn vorgestellt?


----------



## peter_braun (31. Juli 2006)

Hallo,

ich habe ausversehen auf Absenden geklickt obwohl ich nocht nicht fertig war 
ich wollte nur eine Vorschau erhalten. Ich habe mein Beitrag oben nun vervollständigt 

gruß
Peter Braun


----------



## pdatrain (31. Juli 2006)

Achte bitte in Zukunft auf eine nachvollziehbare Fragestellung.

Beispiel:





> 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.


oder 


> 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...



Mal ehrlich: Wie oft müsstest DU Dir das durchlesen, bis Du das gerafft hättest? (Abgesehen davon, dass der zweite Satz noch nicht mal ein Frage ist sondern lediglich eine Information enthält...)

Und öffne ruhig die Augen etwas mehr. Keine vier Stunden zuvor ist diese Frage beantwortet worden:


> 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...


In diesem Thema:
Formular abschicken ohne herkömmlichen button? Mit Bild !?

Ansonsten:

Wie man mit Javascript auf Formularelemente zugreifen kann wird hier ganz gut beschrieben:
SelfHTML

Der Code für "Formular wirklich absenden?" kann so aussehen:


> echt = confirm("Formular abschicken?");
> if (echt == false) {
> return false;
> }


----------



## peter_braun (31. Juli 2006)

Hallo,

Danke für die Hilfe aber ich bekomme das mit denm Radiobuttons nicht hin dass einer ausgewählt sein muss das wird irgendwie ignoriert oder bekomme immer Fehlermeldungen das was nicht definiert ist oder so. Ich kann ja kein JavaScript und habe einfach JavaScript Code den ich gefunde habe eingefügt. 

Das wichtigste was jetzt aif die schnelle gehen sollte weil ich das Formular benötige ist dass die Daten in den Felder ausgefüllt sein müssen und wenn das nicht der Fall ist eine Meldung kommt dass man das Feld ausfüllen muss. Und das bei den AGBs das Formular nur versandt wird wenn man auf Ja geklickt hat. 

Wer könnte mir das machen? Ich wäre auch Bereit die Dienstleistung zu zahlen. Machen Sie mir doch bitte ein Angebot. Vielen Dank. Ich bräuchte es leider sehr Dringend...

Danke

gruß
Peter Braun


----------



## esenay (1. August 2006)

Hallo, wenn du die Radiobuttons prüfen willst, ob einer ausgewählt ist oder nicht, dann musst du nur folgenden Code in deine checkForm() Funktion einfügen. 


```
var radios = document.getElementsByName('anrede');
  if(radios[0].checked == false && radios[1].checked == false){
	alert('Bitte wählen Sie eine Anrede');
	return false;
  }
```

hoffe das funktioniert


----------



## esenay (1. August 2006)

so, und hier hab ich nochmal deinen Code so umgeschrieben, dass deine checkForm() Funktion auf einzelne leere Felder reagiert. 
Hoffe das hilft weiter... 

```
<!-- 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() {

  if(document.getElementById('vorname').value == ""){
	alert('Bitte geben Sie den Vornamen ein!');
	return false;
  }
  /*das ganze dann für alle übrigen Textfelder Felder... :) */
  
  //hier die Überprüfung des selects
  if(document.getElementById('feld6').options.selectedIndex == 0){
	alert('Bitte wählen Sie Ihre Berufsgruppe aus');
	return false;  
  }
  //hier die Überprüfung der radio buttons
  var agbradios = document.getElementsByName('feld10');
    if(agbradios[0].checked == false){
	alert('Das Formular kann nicht abgeschickt werden.<br\>Bitte bestätigen Sie die AGBs');
	return false;
  }
  
  var radios = document.getElementsByName('anrede');
  if(radios[0].checked == false && radios[1].checked == false){
	alert('Bitte wählen Sie eine Anrede');
	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"  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">&nbsp;Frau
         <input type="radio" name="anrede" value="Herr"><span class="Stil1">&nbsp;Herr
         </input>
     </td>
  </tr>
  <tr>
     <td><span class="Stil1">Vorname:<span class="stern">*</td>
     <td><input type="Text" name="vorname"  id="vorname" value="" size="30" ></td>
  </tr>
 <tr>
     <td><span class="Stil1">Name:<span class="stern">*</td>
     <td><input type="Text" name="name" id="name" value="" size="30" ></td>
  </tr>
  <tr>
     <td><span class="Stil1">E-Mail:<span class="stern">*</td>
     <td><input type="Text" name="email" id="email" value="" size="30" ></td>
  </tr>
  <tr>
     <td><span class="Stil1">Straße, Nr.:<span class="stern">*</td>
     <td>
     <input type="Text" name="feld1" id="feld1" value="" size="22" >
     <input type="Text" name="feld2" id="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" id="feld3" value="" size="4" maxlength="5" >
     <input type="Text" name="feld4" id="feld4" value="" size="21">
  </tr>
  <tr>
     <td><span class="Stil1">Geburtsdatum:<span class="stern">*&nbsp;</td>
     <td><input type="Text" name="feld5" id="feld5" value="" size="10"><span class="Stil2">                  Format: (TT.MM.JJJJ)</td></font>
  </tr>
  <tr>
     <td><span class="Stil1">Berufsgruppe:<span class="stern">*&nbsp;</td>
     <td><select name="feld6" id="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" id="feld7" value="" size="30" ></td>
  </tr>
  <tr>
     <td><span class="Stil1">Telefon-Nr.:<span class="stern">*</td>
     <td><input type="Text" name="feld8" id="feld8" value="" size="30" ></td>
  </tr>
  <tr>
     <td><span class="Stil1">Aktionscode:<span class="stern">*</td>
     <td><input type="Text" name="feld9" id="feld9" value="" size="30" ></td></tr></table>

       <tr>
     <td><span class="Stil1">Den AGBs von VID stimme ich zu!<span class="stern">*</td>&nbsp;
     <td></span>
		<input type="radio" name="feld10"  value="JA">JA &nbsp;
         <input type="radio" name="feld10" value="Nein">Nein
         </input>
     </td>
  </tr><br><br>

<input type="Submit" name="anmeldung" value="Senden" onClick='return checkForm();'>
</form>

<!-- Ende Anmeldecode -->
```


----------

