✔ Pflichtfelder in Javascript

Hier ist mein aktueller Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>

<script language="javascript" type="text/javascript">
function checkForm() {

var emailValue = document.getElementById("mail").value;
var nameValue = document.getElementById("name").value;

var filter  = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9])+$/;

if ((emailValue == "") || (!filter.test(emailValue))) {

   alert("Bitte überprüfen Sie Ihre E-Mail-Adresse!");
   document.getElementById("email").focus();

   return false;


}

if (nameValue == "") {

   alert("Bitte geben Sie einen Namen an!");
   document.getElementById("name").focus();

   return false;
}

document.forms[0].submit();

return true;
}
</script>


<body>
<form action="danke.php" method="post" onsubmit="return checkForm();">
  <input type="text" id="mail" name="mail" />
  <input type="text" id="name" name="name" />
  <input type="submit" />
</form>
</body>
</html>

Merkwürdigerweise bleibt die Seite jedoch offen, wenn ich zwar das Mail-Feld richtig ausgefüllt habe und nur den Namen vergessen habe. dann erscheint die Anzeige richtig und wird nicht zum PHP umgeleitet. Aber wenn ich die Mail-Eintragung nicht vorgenommen habe, springt es eben weiter.
 
Hi,

diese Zeile:

Code: 
document.getElementById("email").focus();

verursacht einen Fehler, da es kein Element mit der id "email" in Deinem Dokument gibt. Dadurch wird der Rest der Funktion nicht mehr ausgeführt und somit nicht false zurückgegeben.

Die Fehlerkonsole des Firefox hilft in solchen Fällen.

LG
 
Ich hab zu diesem Thema vor Kurzem eine nette Funktion geschrieben.

Sollte auch in allen gaengigen Browsern funktionieren.

Hier die Funktion, und alle von ihr benoetigten Funktionen.
Javascript: 
function checkform(formobject)
{
	var processform=true;

	var fields=findcheckfields(formobject,formobject.id+'_');

	for (var x=0;x<fields.length;x++)
	{
		var fielderror=false;

		if (getfieldvaluebyname(fields[x])=='')
		{
			fielderror=true;
		}
		else if ((fields[x]=='email') && (!checkmail(getfieldvaluebyname(fields[x]))))
		{
			fielderror=true;
		}

		if (fielderror==true)
		{
			processform=false;

			document.getElementById(formobject.id+'_'+fields[x]).style.color='#ff0000';
			document.getElementById(formobject.id+'_'+fields[x]).style.fontWeight='bold';
		}
		else
		{
			document.getElementById(formobject.id+'_'+fields[x]).style.color='#000000';
			document.getElementById(formobject.id+'_'+fields[x]).style.fontWeight='normal';
		}
	}

	return processform;
}

function findcheckfields(parentobject,prefix)
{
	var checkfields=new Array();

	for (var x=0;x<parentobject.childNodes.length;x++)
	{
		if (parentobject.childNodes[x].id)
		{
			if (parentobject.childNodes[x].id.indexOf(prefix)==0)
			{
				checkfields[checkfields.length]=parentobject.childNodes[x].id.substr(prefix.length);
			}
		}

		if (parentobject.childNodes[x].childNodes.length>0)
		{
			var subs=findcheckfields(parentobject.childNodes[x],prefix);
			if (subs.length>0)
			{
				checkfields=checkfields.concat(subs);
			}
		}
	}

	return checkfields;
}

function getfieldvaluebyname(name)
{
	var index=document.getElementsByName(name).length-1;

	if (index<0)
	{
		return false;
	}

	return document.getElementsByName(name)[index].value;
}

function checkmail(mail)
{
	var regex=new RegExp(/.+@(.+[.])+[\w]{2,}/);

	return regex.test(mail);
}

Ein Beispiel-Formular:
HTML: 
<form id="test" onsubmit="return checkform(this);">
<span id="test_name">Name:</span><input type="text" name="name"><br>
<span id="test_email">eMail:</span><input type="text" name="email"><br>
Comment (optional):<input type="text" name="comment"><br>
<input type="submit">
</form>

Die Form braucht eine ID, diese wird als Prefix (mit angehaengtem _) genutzt wenn Kindelemente durchsucht werden.

Wenn Du also das Input mit dem Namen "name" checken willst brauchst Du ein Element (hier ein <span>, kann aber auch ein <td> oder anderes Element sein) welches die ID "prefix_name" traegt.
Nur diese Felder werden auch geprueft.

Felder mit dem Namen "email" werden zusaetzlich automatisch mittels RegEx auf ein valides Format geprueft.
Die Regular Expression die dabei zum Einsatz kommt mag nicht sehr gut sein, aber sie reicht meiner Meinung nach aus.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück