Pflichtfelder überprüfen

[deadbeat1]

Hallo Leute,

ich bräuchte dringend mal Eure Hilfe.

Das Problem:
In einem ziemlich großen Formular sollen Bereiche wie z.B. abweichende Rechnungs-Adresse über eine checkbox ein- bzw. ausgeblendet werden. Ist der Bereich eingeblendet kommen zusätzliche Pflichtfelder zur Überprüfung hinzu. Pflichtfelder sind Input-, Select- und Radiofelder. Bei fehlenden Felder sollen die Labels rot "gefärbt" werden. Zudem soll es ein Captcha mit Zahlen zur Eingabe geben.

Was noch nicht funktioniert:

1. Select- und Radiofelder werden nicht überprüft
2. Das Formular wird troz fehlender Felder abgeschickt

Was ich schon habe:

Formular:

<form id="contactForm" enctype="multipart/form-data" method="post" onsubmit=";if(self.weWysiwygSetHiddenText){weWysiwygSetHiddenText();};return checkform(this);" name="contactForm" action="/de/forms/contactFormsSuccess.php">
  <input type="hidden" name="edit_object" value="1" />
  <input type="hidden" name="we_editObject_ID" value="0" />
  <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
  
      <table class="contact" cellpadding="0" cellspacing="0" border="0">
         <tr valign="middle">
             <td>
                <label for="Anrede">Anrede <span style="color:#CC0000">*</span>:</label><br />
                    <select name="we_ui_contactForm[Anrede]" id="Anrede" class="pflicht">
                        <option>bitte auswählen</option>
                        <option value="Frau">Frau</option>
                        <option value="Herr">Herr</option>
                        <option value="Firma">Firma</option>
                    </select>
             </td>
             <td>
                <label for="Firma">Firma:</label><br />
                <input id="Firma" type="text" name="we_ui_contactForm[Firma]" value="" />                          
             </td>
         </tr>
         <tr valign="middle">
             <td>
                <label for="Vorname">Vorname <span style="color:#CC0000">*</span>:</label><br />
                <input id="Vorname" class="pflicht" type="text" name="we_ui_contactForm[Vorname]" value="" />
             </td>
             <td>
                <label for="Name">Nachname <span style="color:#CC0000">*</span>:</label><br />
                <input id="Name" class="pflicht" type="text" name="we_ui_contactForm[Name]" value="" />
             </td>
         </tr>
         
         ... usw.

         <!-- hier ein Bereich der eingeblendet werden kann mit einem Pflichtfeld -->
         <tr valign="middle" colspan="2" height="35">
             <td valign="top">
                <label for="Rueckruf">Ich bitte um Rückruf:</label>
             </td>
             <td valign="top">
                <input class="block" name="anruf" id="checkAnruf" type="checkbox" onclick="javascript:changeDisplay('prim');" style="margin:3px; width: 20px">
                <label for="Rueckruf">JA</label>
             </td>
         </tr>
         <tr valign="middle" id="anruf" style="display: none">
             <td>
                <label for="TelefonRueckruf">Telefon <span style="color:#CC0000">*</span>:</label><br />
                <input id="TelefonRueckruf" type="text" name="we_ui_contactForm[TelefonRueckruf]" value="" />
             </td>
             <td>
                <label for="Erreichbarkeit">Erreichbarkeit unterhalb der Woche:</label><br />
                <input id="Erreichbarkeit" type="text" name="we_ui_contactForm[Erreichbarkeit]" value="" />
             </td>
         </tr>
         
         ... usw.
         
         <tr valign="middle">
             <td style="padding-bottom:15px;">
                <label for="Aktionen">Möchten Sie von WR auch über Aktionen und Angebote informiert werden. Die <a class="tips"  href="#" rel="/de/forms/tooltippEinwilligungKontaktaufnahme.php">Werbeeinwilligung</a> habe ich gelesen und bin damit einverstanden <span style="color:#CC0000">*</span>:</label>
             </td>
             <td style="padding-bottom:25px;">
                <input id="Aktionen_yes" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Aktionen]" value="Ja" /> Ja
                <input id="Aktionen_no" style="margin:1px; width: 50px" type="radio" name="we_ui_contactForm[Aktionen]" value="Nein" /> Nein
             </td>
         </tr>
         <tr valign="middle">
             <td style="padding-bottom:15px;">
                <label for="code">Bitte geben Sie diese <span id="txtCaptchaDiv" style="color:#F00"></span><input type="hidden" id="txtCaptcha" /> Zahl in das Feld ein.</label>
             </td>
             <td style="padding-bottom:15px;">
                <input type="text" name="txtInput" id="txtInput" class="pflicht"/>
             </td>
         </tr>
         <tr>
             <td colspan="2">
                <br>
                <input type="submit" name="submit" id="submit" class="rightColum" value="senden"/>
             </td>
         </tr>

Javascript (Pflichtfelder und einblenden):

<script type="text/javascript">
$(function () {   
     
  $('.block').change(function () {   
    $(this).parents('tr').next().toggle(); // Nächste Zeile Ein-/Ausblenden 
  });   
    
  //Beim abschicken prüfen   
  $('#submit').click(function () {  
     
    $('td:visible').each(function (i, td) { //Alle Sichtbaren Zellen prüfen 
       
      //TextFelder prüfen 
      $(td).find('.pflicht').each(function (j, input) {  
        //Zum Beispiel auf länge prüfen...min 4...   
        if($(input).val().length < 4) {   
          $(input).siblings("label").css({color: 'red'});   
          //alert("Bitte füllen Sie alle Pflichtfelder aus!");  
          return false; 
        } 
        $('#contactForm').submit(); 
      });    

    }); 
     
     
  });  
});   
</script>

Javascript (Captcha):

<script type="text/javascript">
	function checkform(theform){
		var why = "";
		 
		if(theform.txtInput.value == ""){
			why += "Das Feld gegen Spam-Schutz darf nicht leer sein.\n";
		}
		if(theform.txtInput.value != ""){
			if(ValidCaptcha(theform.txtInput.value) == false){
				why += "Das Feld Spam-Schutz ist nicht korrekt ausgefüllt.\n";
			}
		}
		if(why != ""){
			alert(why);
			return false;
		}
	}
 

//Generates the captcha function    
	var a = Math.ceil(Math.random() * 9)+ '';
	var b = Math.ceil(Math.random() * 9)+ '';       
	var c = Math.ceil(Math.random() * 9)+ '';  
	var d = Math.ceil(Math.random() * 9)+ '';  
	var e = Math.ceil(Math.random() * 9)+ '';  
	  
	var code = a + b + c + d + e;
	document.getElementById("txtCaptcha").value = code;
	document.getElementById("txtCaptchaDiv").innerHTML = code;	

// Validate the Entered input aganist the generated security code function   
function ValidCaptcha(){
	var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
	var str2 = removeSpaces(document.getElementById('txtInput').value);
	if (str1 == str2){
		return true;	
	}else{
		return false;
	}
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
	return string.split(' ').join('');
}
</script>

Danke für Eure Hilfe

 

[eptical]

Hab jetzt deinen Code zwar nicht genau angeschaut, aber mit der clientseitigen Validerung mit Hilfe von jQuery funktioniert das in etwa so:

* Click-Event des Submit-Buttons oder Submit-Event des Forms binden
* Dort den Submit-Vorgang ersteinmal stoppen mit "event.preventDefault()"
* Dann die Validierung vornehmen und wenn alles gut ist, das formular mit ".submit()" abschicken

Hoffe das hilft

_______

Edit: Kurz mal bspw. auf deinen Code bezogn

$('#submit').bind('click', function(event) {  
  event.preventDefault();

  if(doValidation())
  {
    $('#contactForm').submit();
  }
});