Formular-Felder, die sich gegenseitig dynamisch überprüfen.

[messmar]

Hallo,

kann man eine Funktion bauen, wo die Forlmuar-Felder sich gegenseitig überprüfen
und erst wenn alle (Felder) die Bedingungen erfüllen, dann wird ein Sende-Button sichtbar, der das Formular an den Server schickt?

Ich habe es zwar gebaut, aber es sieht nicht Profetionell aus und beinhaltet sehr
sehr viel Code.

Vielen Dank und Gruß
Messmar

 

[mr_arrogant]

Zeig doch mal deinen Code ;-)

Also hier ist mein kleines und schmales Snippet welches ich Standartmäßig in meine Web Applikationen einbaue um Formularfelder zu prüfen:

function checkFormfields(formdata) {
	var error=false;
	for(var i=0;i<formdata.length;i++) {
		if(!Field.present(formdata[i].id)) {
			$(formdata[i].id).style.backgroundColor = '#CBE99A';
			error=true;
		}else{	
			$(formdata[i].id).style.backgroundColor = '#BCBCBC';
		}
	}
	if(error)  return true;
	else  return false;
}

Dies kann dann z.B. so eingesetzt werden:

$("btnSubmit").onclick = function() {
  var error = checkFormfields(document.DeinFormular);
  if(error) {
     // Fehler
    $("error").innerHTML = '<br/><br/>Bitte überprüfe nochmal alle Felder!';
    $("Button").disabled = true;
    return false;
  }else{
    // Alles Ok!
    $("Button").disabled = false;
    return false;
  }
}

 

[messmar]

Dein Code ist kurzer und sauberer. mein Code werde ich mit JSP verwenden, aber ich glaube, dass ich ihn so lasse und die
Abfrage nur durch die eingebaute Java Script durchführe.
Aber eine Frage noch: Was ist denn, wenn du die Fehlermeldung auf die einzelnen Felder bezogen, ausgeben willst.

Code:

function chekCheck(){
	var checkSign = document.getElementById('checkStopSign').checked;
	var privacyChecked = document.getElementById('checkStopSign').checked;
	var eMail =  document.getElementById('uEmail').value;
	
	var budjet = document.getElementById('automodellA').options[document.getElementById('automodellA').options.selectedIndex].value;
	
	
	if (budjet){
	
		if (!eMail) {
			errorMessage(unescape('Please fill in your email address!'));
			return false
		}
		
		if (eMail!="") {
			if(eMail.match(/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) == null) {
				errorMessage(unescape('Please enter a valid email address'));
				return false
			}
		}
		
		if (!document.getElementById('checkStopSign').checked){
			errorMessage(unescape('Please fill in Privacy'));
			return false;
		}
	}
	
	if (eMail){
		if(eMail.match(/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) == null) {
				errorMessage(unescape('Please enter a valid email address'));
				return false
			}
	
		if (!budjet) {
			errorMessage(unescape('Please select your available budget to proceed'));
			return false
		}
		if (!document.getElementById('checkStopSign').checked){
			errorMessage(unescape('Please fill in Privacy'));
			return false;
		}
	}
	
	if (document.getElementById('checkStopSign').checked){
	
		if (!budjet) {
			errorMessage(unescape('Please select your available budget to proceed'));
			return false
		}
		
		
		if (!eMail) {
			errorMessage(unescape('Please fill in your email address!'));
			return false
		}
		
		if (eMail!="") {
			if(eMail.match(/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) == null) {
				errorMessage(unescape('Please enter a valid email address'));
				return false
			}
		}
	}
	
	whichImage = document.getElementById('imgStopGoButton').src;
	intStrich  = whichImage.lastIndexOf('/');
	intPunkt   = whichImage.lastIndexOf('.');
	strPart    = whichImage.substring(Math.min(intStrich, intPunkt)+1, Math.max(intStrich, intPunkt));	
	
	document.getElementById("stop").firstChild.src = "img/img_gosign.png";
	//alert(document.getElementById("imgStopGoButton").name);
	document.getElementById("imgStopGoButton").style.cursor="pointer";
	
	var goButtonEvent = document.getElementById("imgStopGoButton");
	
	var sendIt = function (){document.getElementById('indexForm').submit()};
	goButtonEvent.onclick = sendIt;
}

var statments = '{'+
		'var oTextNode = document.createTextNode(text);'+
		'document.getElementById("errorTxt").replaceChild(oTextNode, document.getElementById("errorTxt").firstChild);'+
		'document.getElementById("errorTxt").className = "errorVisible";'+
		'return false;'+
		'}';
var errorMessage = new Function('text', statments);

 

[mr_arrogant]

Aber eine Frage noch: Was ist denn, wenn du die Fehlermeldung auf die einzelnen Felder bezogen, ausgeben willst.

Och da gibt es mehrere Wege, der einfachste wäre natürlich in der Schleife in der ich die Felder durchlaufe mir den Namen jedes Feldes ausgeben zu lassen und dann alles zusammengefasst auszugeben, z.B. so dann:

Name wurde nicht ausgefüllt
E-Mail wurde nicht ausgefüllt
etc.

Zusätzlich kann man natürlich noch eine Externe Funktion zur E-Mail Validierung einbinden usw.

Wie gesagt, es gibt mehrere Wege dies zu realisieren, eine switch/case abfrage einzubinden wäre natürlich das einfachste.



mfg
mr-d

 

[messmar]

Hi,

du hast Recht. mit ner Schleife und Zählvariable, kann man die Elemente des Formulars durchlaufen und entsprechend den Fehler ausgeben.

Ich nimm mir Zeit und baue das ganze um und wie du sagtest, es gibt mehrere Wege, wie man das realisieren kann. Da hast du Recht ;-)

Vielen Dank und Gruß
Messmar

 

[mr_arrogant]

Du darfst auch gerne mein Snippet nutzen und entsprechend anpassen wenn du magst

EDIT: Ehrlich gesagt finde ich Formulare die, bei nicht ausgefüllten Feldern, ewig lange Fehlermeldungen produzieren mehr als unnötig.
Einzig bei Syntax oder Datenbank Bestandsprüfungen ist es sinnvoll eine entsprechend gut deklarierte Fehlermeldung auszugeben.
Für ein normales Formular wie eine Registrierung oder etwas ähnliches langt, wie ich es auch in meinem Script verwende, ein kleiner Text der Aufzeigt das nicht alles korrekt ausgefüllt wurde, sowie dem markieren der entsprechenden Felder mit einer Hintergrund oder Rahmenfarbe.



mfg
mr-d