Styleeigenschaften verändern

SeeSharpNewBee · 9. Mai 2007

Hi,

ich habe folgendes Problem, und zwar ich habe ein Formular, dieses soll bei "Submit" überprüft werden ob sich in den "required" Feldern Text befindet, wenn nicht, soll das Inputfeld einen roten Hintergrund bekommen.

das ist ein Feld das überprüft werden soll, alle "muss" Felder haben die ID "in":

HTML:

<input id="in" type="text" name="vorname" value="" size="50"  maxlength="50" tabindex="2"/>

und jetzt versuche ich mit diesem Script in einer externen Datei den Hintergrund Rot zu färben, aber das funktioniert irgendwie nicht, ich finde den Fehler einfach nicht!

Code:

function checkRequiredFields(objForm)
{
	for (var i=0; i<objForm.elements.length; i++) {
	
 		var objElement = objForm.elements[i];
 		
 		if(objElement.id == 'in' && objElement.value == '')
 		{
            objElement.style.backgroundColor = "#FF0000";
		}
		else
		{
			objElement.style.backgroundColor='#FFFFFF';    
		}
	}
}

Bitte helft mir, danke!

Sven Mintel · 9. Mai 2007

Eine ID darf nur einmal pro Dokument vergeben werden...das wäre zumindest ein Fehler, der dürfte dein Skript aber nicht scheitern lassen.

Kurzum...in dem geposteten Code lässt sich kein Fehler ausmachen, der ein Nichtfunktionieren verursachen würde...du müsstest mehr Code zeigen, z.B. den Aufruf dieser Funktion.

SeeSharpNewBee · 10. Mai 2007

Hi, danke für die Antwort!

Sven Mintel hat gesagt.:
Eine ID darf nur einmal pro Dokument vergeben werden...

Gibts eine andere Möglichkeit zb. alle "Muss"-Felder irgendwie zu kennzeichnen, weil das mit ID funktioniert.

Code:

	<form name="ANM" action="<%=request.getContextPath()%>/Anmeldung" method="post" onsubmit="checkRequiredFields(this);">
		<div align="center">
			<div align="center" style="width: 70%;">
				<fieldset>
					<legend>Ansprechperson</legend>
					<table width="100%" border="0" align="center">
						<tr style="background-color: #FF6347;">
							<td colspan="2"  align="center"><fmt:message key="date"/>:&nbsp;&nbsp;&nbsp;<input type="text" name="fir_regdatum" value="<%=sdf.format(dt)%>" readonly style="border-style: none; font-weight: bold; background-color: #FF6347;"></td>
						</tr>
						<tr><td>&nbsp;</td></tr>
						<tr>
							<td><fmt:message key="anrede"/><font color="#FF0000">*</font></td>
					  		<td>
					  			<select name="ans_anrede" size="1"> 
					    			<option value="Herr" selected><fmt:message key="a_herr"/></option>
					    			<option value="Frau"><fmt:message key="a_frau"/></option>
					  			</select>
					  		</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td><fmt:message key="titel"/></td>
							<td><input type="text" name="ans_titel" value="" size="30" maxlength="30" tabindex="1"/><a href="javascript:void(0);" onmouseover="return overlib('<fmt:message key="titel_info"/>');" onmouseout="return nd();"><img src="<%=request.getContextPath()%>/img/info.png" border="0" /></a></td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td><fmt:message key="vorname"/><font color="#FF0000">*</font></td>
							<td><input id="in" type="text" name="ans_vorname" value="" size="50"  maxlength="50" tabindex="2"/><a href="javascript:void(0);" onmouseover="return overlib('<fmt:message key="vorname_info"/>');" onmouseout="return nd();"><img src="<%=request.getContextPath()%>/img/info.png" border="0" /></a></td>
							<td><div id="err_vorname" class="error"></div></td>						
						</tr>

Das ist ein Auszug aus dem Teil, indem das Script aufgerufen wird.

Hoffe du/jemand kann(st) mir helfen! Danke!

ssurfer · 10. Mai 2007

Hi,

änder mal folgendes ab.

HTML:

function checkRequiredFields(objForm)
{
	for (var i=0; i<objForm.elements.length; i++) {
	
 		var objElement = objForm.elements[i];
 		
 		if(objElement.id == 'in' && objElement.value == '')
 		{
                  objElement.style.backgroundColor = "#FF0000";
                  return false;
		}
		else
		{
		  objElement.style.backgroundColor='#FFFFFF';    
		}
	}
}

Code:

<form name="ANM" action="<%=request.getContextPath()%>/Anmeldung" method="post" onsubmit="return checkRequiredFields(this);">

Quaese · 10. Mai 2007

Hi,

willst Du alle Felder rot färben, die nicht korrekt ausgefüllt sind, durchlaufe erst alle Elemente und gib den
booleschen Wert am Ende der Funktion zurück.

Weiterhin kannst Du das Problem mit den IDs umgehen, indem Du sie durchnummerierst - z.B. in_01, in_02 usw. In der
Funktion prüfst Du mit Hilfe eines regulären Ausdrucks und der Methode search ob die ID mit in_ beginnt.

Code:

function checkRequiredFields(objForm){
	var blnCheck = true;
	for (var i=0; i<objForm.elements.length; i++) {

 		var objElement = objForm.elements[i];
    if(objElement.id.search(/^in_/) != -1 && objElement.value == '')
 		{
            objElement.style.backgroundColor = "#FF0000";
      blnCheck = false;
		}
		else
		{
			objElement.style.backgroundColor='#FFFFFF';
		}
	}

  return blnCheck;
}

Ciao
Quaese

SeeSharpNewBee · 10. Mai 2007

Hi und danke für die Hilfe!

Hat super funktioniert, jetzt wollte ich die function noch etwas erweitern, und zwar:

Möchte ich das wenn die Bedinung zutrifft das das Feld leer ist nicht nur das Feld gefärbt wird, sondern auch noch im "div" nebenbei eine Meldung erscheint.

Ich habe mir gedacht ich erweitere die function so, wobei neben jedem Textfeld ein "div" Tag ist, der leer ist, und die id "err_ + eine nummer" ist.

Mein Versuch das ganze zu erweitern funktioniert leider nicht so wie ich es mir gedacht habe, wo habe ich einen Fehler gemacht? Danke

Code:

    	if(objElement.id.search(/^in_/) != -1 && objElement.value == '')
 		{
            objElement.style.backgroundColor = "#FFEC8B";
            var errElement = objForm.getElementById('err_'+i);
            errElement.innerText = 'Bitte ausf&uuml;llen!';
      		blnCheck = false;
		}

Quaese · 10. Mai 2007

Hi,

wenn Du den Fehler-DIVs IDs mit den gleichen Endungen wie dem zugehörigen Feld gibst (z.B. in_01 und err_01), kannst Du
mal folgendes versuchen.

Code:

function checkRequiredFields(objForm){
	var blnCheck = true;
	for (var i=0; i<objForm.elements.length; i++) {

 		var objElement = objForm.elements[i];
    if(objElement.id.search(/^in_/) != -1 && objElement.value == '')
 		{
            objElement.style.backgroundColor = "#FFEC8B";
            var errElement = document.getElementById('err_'+objElement.id.split("_")[objElement.id.split("_").length-1]);
            errElement.innerHTML = 'Bitte ausf&uuml;llen!';
      blnCheck = false;
		}
		else
		{
			objElement.style.backgroundColor='#FFFFFF';
		}
	}

  return blnCheck;
}

Die Eigenschaft um einem Element einen Wert zuzuweisen, muss innerHTML lauten, nicht innerText.

Ciao
Quaese

SeeSharpNewBee · 10. Mai 2007

Hi, danke für die Antwort.

Hat aber leider nicht funktioniert. Die Fehlerkonsole gibt folgendes aus:
Fehler: errElement has no properties
Zeile: 23

woran liegt das? Danke!

Quaese · 10. Mai 2007

Hi,

folgendes funktioniert bei mir:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script type="text/javascript">
<!--
function checkRequiredFields(objForm){
	var blnCheck = true;
	for (var i=0; i<objForm.elements.length; i++) {

 		var objElement = objForm.elements[i];
    if(objElement.id.search(/^in_/) != -1 && objElement.value == '')
 		{
            objElement.style.backgroundColor = "#FFEC8B";
            var errElement = document.getElementById('err_'+objElement.id.split("_")[objElement.id.split("_").length-1]);
            errElement.innerHTML = 'Bitte ausf&uuml;llen!';
      blnCheck = false;
		}
		else
		{
			objElement.style.backgroundColor='#FFFFFF';
		}
	}

  return blnCheck;
}
//-->
</script>
</head>
<body>
<form name="ANM" action="blank.html" method="post" onsubmit="return checkRequiredFields(this);">
  <div align="center">
    <div align="center" style="width: 70%;">
      <fieldset>
        <legend>Ansprechperson</legend>
        <table width="100%" border="0" align="center">
          <tr style="background-color: #FF6347;">
            <td colspan="2"  align="center"><fmt:message key="date"/>:&nbsp;&nbsp;&nbsp;<input type="text" name="fir_regdatum" value="<%=sdf.format(dt)%>" readonly style="border-style: none; font-weight: bold; background-color: #FF6347;"></td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
            <td><fmt:message key="anrede"/><font color="#FF0000">*</font></td>
              <td>
                <select name="ans_anrede" size="1">
                  <option value="Herr" selected><fmt:message key="a_herr"/></option>
                  <option value="Frau"><fmt:message key="a_frau"/></option>
                </select>
              </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><fmt:message key="titel"/></td>
            <td><input type="text" name="ans_titel" value="" size="30" maxlength="30" tabindex="1"/><a href="javascript:void(0);" onmouseover="return overlib('<fmt:message key=\'titel_info\'/>');" onmouseout="return nd();"><img src="<%=request.getContextPath()%>/img/info.png" border="0" /></a></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><fmt:message key="vorname"/><font color="#FF0000">*</font></td>
            <td><input id="in_01" type="text" name="ans_vorname" value="" size="50"  maxlength="50" tabindex="2"/><a href="javascript:void(0);" onmouseover="return overlib('<fmt:message key=\'vorname_info\'/>');" onmouseout="return nd();"><img src="<%=request.getContextPath()%>/img/info.png" border="0" /></a></td>
            <td><div id="err_01" class="error"></div><input type="submit" value="submit" /></td>
          </tr>
        </table>
      </fieldset>
    </div>
  </div>
</form>
</body>
</html>

Ciao
Quaese

Styleeigenschaften verändern

SeeSharpNewBee

Erfahrenes Mitglied

Sven Mintel

Mitglied

SeeSharpNewBee

Erfahrenes Mitglied

ssurfer

Erfahrenes Mitglied

Quaese

Moderator

SeeSharpNewBee

Erfahrenes Mitglied

Quaese

Moderator

SeeSharpNewBee

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge