Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

lascaux · 09-10-2009, 17:20

Hallo,

ich habe mir ein Script mit Javascript gemacht um Kontakt-Formulare auf ihren inhalt zu prüfen (ob der Name eingegeben wurde usw.).

Da ich absolut keine Ahnung von Javascript habe, habe ich mit Hilfe des Internets eins zusammengepuzzelt. Und es funktioniert auch sehr gut

Allerdings möchte ich anstatt einem Alert-Fenster wo die ganzen fehlenden Sachen stehen, ein kleines PopUp fenster haben was in der Mitte des Bildschirms aufploppt und dann die Fehler ausgibt.

Hier mal mein Script:

Code:

function fcheck(f) {
  
  var fehler = "";
  
  if (f.elements["fname"].value == "name" || f.elements["fname"].value.length <3 || f.elements["fname"].value == "   ") {
    fehler += "please enter your name\n";
  }
  
  if (f.elements["fmail"].value == "mail" || f.elements["fmail"].value.indexOf('@') == -1 || f.elements["fmail"].value.indexOf('.') == -1 || f.elements["fmail"].value.length <5) {
    fehler += "please enter a valid email-adress\n";
  }
  
  if (f.elements["fsubject"].value == "subject" || f.elements["fsubjects"].value.length <3) {
    fehler += "please enter the subject\n";
  }
  
  if (f.elements["fmessage"].value == "...your message" || f.elements["fmessage"].value.length <20) {
    fehler += "please enter a text with more than 20 characters\n";
  }
  
  if (f.elements["request"].value == "") {
    fehler += "please choose the type of your request";
  }
  
  if (fehler == "") {
    return true;
  } else {
    alert("ERROR\n\n" + fehler);
    return false;
  }
}

Hätte jemand eine Idee wie man das ganze umsetzen könnte, so dass ein PopUp Fenster in der Mitte des Bildschirms mit den Fehlenden value's aufspringt?

Vielen dank im Voraus.

Stefan

Nightflyer · 09-10-2009, 21:55

Also ein PopUp im Sinne eines echten PopUps würd ich sicher nicht machen. Besser ist einfach ein div über dem Inhalt erscheinen zu lassen. Mach dazu ein verstecktes div in deine HTML-Seite:

Code:

//CSS
#divpopup{
     position: absolute;
     width: 300px;
     height: 100px;
     top: 50%;
     left: 50%;
     margin-top: -50px; //Halbe Höhe
     margin-left: -150px; //Halbe Breite
     background-color: #000044;
     border: 1px solid white;
     display: none;
}

HTML

<div id="divpopup">
     <div style="float:right;width:20px;height:20px;margin:3px;border: 1px solid white;" onclick="document.getElementById("divpopup").style.display='none';">X</div>
</div>

Dieses Div lässt du nun bei einem Fehler erscheinen und füllst es mit der Fehlermeldung:

Code:

if (fehler == "") {
     return true;
} else {
    document.getElementById("divpopup").innerHTML = "ERROR\n\n" + fehler;
    document.getElementById("divpopup").style.display='block';
     return false;
  }

lascaux · 10-10-2009, 13:14

Danke für das Script, die Idee mit der div-Box ist wirklich genial. Könntest Du da noch einen kleinen button einbauen der dann die div-Box wieder verschwinden lässt?

Stefan

Nightflyer · 11-10-2009, 10:33

hats doch..

Code:

<div style="float:right;width:20px;height:20px;margin:3px;border: 1px solid white;" onclick="document.getElementById("divpopup").style.display='none';">X</div>

lascaux · 13-10-2009, 11:04

Mal abesehen von dem kleinen Fehler den ich ausgebesser habe (" " anstatt ' '), funktioniert es bei mir nicht. Es wird kein Feld angezeigt was sich anklicken lässt bzw die div-Box wieder schliesst.

Nightflyer · 13-10-2009, 13:04

Zitat:

Zitat von lascaux

Mal abesehen von dem kleinen Fehler den ich ausgebesser habe (" " anstatt ' '), funktioniert es bei mir nicht.

Möglich dass genau diese Änderung bewirkt dass bei dir nix angezeigt wird. Gib dem Kästchen noch ne Hintergrundfarbe damit du es besser findest.

lascaux · 13-10-2009, 13:16

Die Hintergrund-Farbe habe ich von anfang an anders eingestellt.
Der Fehler den ich ausgebessert habe, ist bei onclick zu sehen:

PHP-Code:

  onclick="document.getElementById("divpopup").style.display='none';"

Auch ohne ausbessern funktioniert es bei mir nicht, ich sehe da kein Kästchen.

Stefan

Nightflyer · 13-10-2009, 14:44

Ok, der Fehler ist jetzt klar. Musst innerHTML += machen sonst ersetzt deine Fehlermeldung das Kästchen anstelle dass sie angehängt wird.

Hier noch schön mit JQuery:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<style type="text/css">

	body{
		background-color: #555555;
	}

	#divpopup{
     		position: absolute;
     		width: 300px;
     		height: 100px;
     		top: 50%;
     		left: 50%;
     		margin-top: -50px;
     		margin-left: -150px;
     		background-color: #AAAAAA;
     		border: 1px solid white;
    		display: none;
		padding: 10px;
	}
	#divpopup_close{
		float:right;
		width:20px;
		height:20px;
		border: 1px solid white;
		color: white;
		background-color: #666666;
		padding: 2px;
	}

	
	</style>

	<script type="text/javascript">

		function testcontent(){

			$('#divpopup').append( '<h2>Lorem ipsum dolor sit amet...</h2>' );

		}

		$(document).ready( function(){

			$('#test').click(function(){

				$('#divpopup').css( { display: 'block' });
				
			});

			$('#divpopup_close').click( function(){

				$('#divpopup').css( { display: 'none' });

			});

			testcontent();

		});


	</script>
	
</head>
<body>
	
	<div id="divpopup">
     		<div id="divpopup_close"><strong>X</strong></div>
	</div>

	<a id="test" style="color:white;" href="#">test</a>

	
</body>
</html>

11-10-2009, 10:33	#4 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	hats doch.. Code: <div style="float:right;width:20px;height:20px;margin:3px;border: 1px solid white;" onclick="document.getElementById("divpopup").style.display='none';">X</div> __________________ (\__/) (='.'=) (")_(")

13-10-2009, 13:16	#7 (permalink)
lascaux Neuer User Registriert seit: Oct 2009 Beiträge: 6	Die Hintergrund-Farbe habe ich von anfang an anders eingestellt. Der Fehler den ich ausgebessert habe, ist bei onclick zu sehen: PHP-Code: `onclick="document.getElementById("divpopup").style.display='none';"` Auch ohne ausbessern funktioniert es bei mir nicht, ich sehe da kein Kästchen. Stefan

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Formular überprüfen	basti_b	ActionScript 3	4	10-11-2008 18:31
formular nach zeichen überprüfen	angelikab	JavaScript & jQuery	21	20-04-2006 14:47
Formular überprüfen: Problem mit array	molekuel	PHP und MySQL	15	17-11-2004 21:12
Formular überprüfen nix passendes gefunden	m_martins	ActionScript 1	0	17-12-2003 13:50
Formular überprüfen und mehr?	Macsea	ActionScript 1	3	04-07-2001 22:19

10-10-2009, 13:14	#3 (permalink)
lascaux Neuer User Registriert seit: Oct 2009 Beiträge: 6	Danke für das Script, die Idee mit der div-Box ist wirklich genial. Könntest Du da noch einen kleinen button einbauen der dann die div-Box wieder verschwinden lässt? Stefan

13-10-2009, 11:04	#5 (permalink)
lascaux Neuer User Registriert seit: Oct 2009 Beiträge: 6	Mal abesehen von dem kleinen Fehler den ich ausgebesser habe (" " anstatt ' '), funktioniert es bei mir nicht. Es wird kein Feld angezeigt was sich anklicken lässt bzw die div-Box wieder schliesst.