Just nu i M3-nätverket
Gå till innehåll
Anderberg

Rödmarkera felaktiga textfält

Rekommendera Poster

Har ett formulär som används för att spara ner lite information i en databas och använder javascript för att kontrollera att alla textfälten är korrekt ifyllda.

Hur gör jag för att färga dom felaktiga textfälten röda eller skriva ut någon röd text ovanför dom felaktiga textfälten?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Här är en inte helt perfekt variant, som lägger till en rött asterisk framför tomma fält:

 

[log]

<html>
<head>
<title>Lottas Hud &amp; Friskv&aring;rd</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function CheckForm() {
var blRet=true;
for (i=0;i<arguments.length;i++) {
	o=document.getElementById(arguments[i]);
	if (o.value=='') {
		o.parentNode.innerHTML="<b style='color:red'>* </b>"+o.parentNode.innerHTML;
		blRet=false;
	}
}
return blRet;
}
//-->
</SCRIPT>
</head>
<body>
<form action="" method="post" onsubmit="return(CheckForm('fld1','fld2','fld3'));">
<table>
<tr><td><input type="text" id="fld1" name="fld1"></td></tr>
<tr><td><input type="text" id="fld2" name="fld2"></td></tr>
<tr><td><input type="text" id="fld3" name="fld3"></td></tr>
<tr><td></td><td><input type="submit" value="Posta"></td></tr>
</table>
</form>
</body></html>

[/log]

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok, här är en bättre variant. Nu har jag lagt till en tom cell till höger om varje fält och detta fylls med asterisken vid fel.

 

[log]

<html>
<head>
<title>Lottas Hud & Friskvård</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function CheckForm() {
var blRet=true;
for (i=0;i<arguments.length;i++) {
	o=document.getElementById(arguments[i]);
	oDest=document.getElementById(arguments[i]).parentNode.parentNode.childNodes[1];
	if (o.value=='') {
		oDest.innerHTML="<b style='color:red'>* </b>";
		blRet=false;
	}
}
return blRet;
}
//-->
</SCRIPT>
</head>
<body>
<form action="" method="post" onsubmit="return(CheckForm('fld1','fld2','fld3'));">
<table>
<tr><td><input type="text" id="fld1" name="fld1"></td><td></td></tr>
<tr><td><input type="text" id="fld2" name="fld2"></td><td></td></tr>
<tr><td><input type="text" id="fld3" name="fld3"></td><td></td></tr>
<tr><td></td><td><input type="submit" value="Posta"></td><td></td></tr>
</table>
</form>
</body></html>

[/log]

 

EDIT: Om du lägger till fler fält i varje tabellrad måste du ändra följande rad i scriptet, så den pekar på rätt cell:

oDest=document.getElementById(arguments[i]).parentNode.paren
tNode.childNodes[1];

[inlägget ändrat 2004-12-21 21:24:40 av Anjuna Moon]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jodå, det funkar, men jag märkte just att när man klipper och klistrar in min kod direkt från eforum så blir det en radbrytning mitt i en av raderna. Se till att följande ligger på en och samma rad:

 

oDest=document.getElementById(arguments).parentNode.parentNode.childNodes[1];

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Har inte haft tid att pyssla med det på ett par dagar därför det dröjde lite innan jag kunde prova din kod.

 

Nu fungerar det nästan men om jag t.ex. fyller i ett fält så blir det markeringar på två fält när jag klickar på knappen. Fyller jag sedan bara i ett av dom tomma fälten så försvinner inte den markeringen för detta fält utan där finns fortfarande två markeringar kvar. Går detta att fixa?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jepp, ändra funktionen till:

 

function CheckForm() {
var blRet=true;
for (i=0;i<arguments.length;i++) {
	o=document.getElementById(arguments[i]);
	oDest=document.getElementById(arguments[i]).parentNode.parentNode.childNodes[1];
	oDest.innerHTML=(blRet=(o.value!=''))?"":"<b style='color:red'>* </b>";
}
return blRet;
}

 

EDIT: Än en gång, kontrollera att radbrytningarna tas bort i koden

[inlägget ändrat 2004-12-29 00:07:08 av Anjuna Moon]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Har försökt att fixa in koden till sidan där jag ska använda den men när jag klickar på knappen så försvinner alla textfälten men det blir röda * där det var tomma textfält.

 

Skulle du kunna förklara vad jag har missat när jag flyttade över koden i min kod?

 

Har lagt upp koden här: http://www.anderberg.name/kod.txt

Du får nog välja visa källa för det verkar som att textfilen tolkas som en html sida.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Lägg först till en tom tabellcell längst till höger, ex:

<tr><td><font face=verdana size=1>Förnamn:</font></td>

<td><input type="text" id="Firstname" name="Firstname" value="" size=30 maxlength=200></td><td></td></tr>

 

Ändra sedan funktionen till:

function checkForm()
{
var blRet=true;
for (i=0;i<arguments.length;i++) {
o=document.getElementById(arguments[i]);
oDest=document.getElementById(arguments[i]).parentNode.parentNode.childNodes[[color="#ff0000"]2[/color]];
oDest.innerHTML=(blRet=(o.value!=''))?"":"<b style='color:red'>* </b>";
}
return blRet;


}

 

(Ändrade alltså bara en etta till en tvåa, rödmarkerat)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Fungerar fint, tackar.

 

Verkar dock vara något lurt med koden för fyller jag i något i sista textfältet så accepteras det och utför formuläret trotts att alla dom andra fälten är tomma.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ok, då försöker vi med följande utseende på funktionen:

[log]

function checkForm()
{
var blRet=true;
for (i=0;i<arguments.length;i++) {
	o=document.getElementById(arguments[i]);
	oDest=document.getElementById(arguments[i]).parentNode.parentNode.childNodes[2];
	blRet=blRet && (o.value!='');
	oDest.innerHTML=(o.value!='')?"":"<b style='color:red'>* </b>";
}
return blRet;
}

[/log]

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Fungerade fint, tack.

 

 

Funderade lite på om jag skulle vilja kolla ett eller bara några fält t.ex. att dom två sista lösenordsfälten är längre än fem tecken.

Går detta att lägga till på något smidigt sätt?

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Dina önskemål börjar bli svåra att få in i en generell funktion, så det sätt jag skrivit om den på är anpassat efter ditt formulär som det ser ut nu. Nu kontrolleras även att längden på lösenordsfälten är längre än 5 samt att de matchar varandra. Dessutom skrivs felmeddelanden ut efter varje felaktigt fält.

 

Funktionen:

[log]

function checkForm()
{
var blRet=true;
var arrFld=new Array('Firstname', 'Lastname','Address','ZipCode','City','Country','Phone','Email','Username','Password','Password2');
var nPwd1=9;
var nPwd2=10;
var nPwdLength=5; // Krävd lösenordslängd
for (i=0;i<arrFld.length;i++) {
	sXtra='';
	blTmp=true;
	o=document.getElementById(arrFld[i]);
	oDest=document.getElementById(arrFld[i]).parentNode.parentNode.childNodes[2];
	if (i!=nPwd1 && i!=nPwd2) {
		blTmp = (o.value!='');
		sXtra="(Fältet obligatoriskt)";
	} else {
		blTmp = (o.value.length>=nPwdLength);		
		sXtra="(Minst "+nPwdLength+" tecken krävs!)";
		if (i==nPwd2 && o.value!=document.getElementById(arrFld[nPwd1]).value) {
			blTmp=false;
			sXtra="(Matchar ej lösenordet)";
		}
	}
	blRet=blRet && blTmp
	oDest.innerHTML=(blTmp)?"":"<b style='color:red'>*</b> "+ sXtra;
}
return blRet;
}

[/log]

 

Anropet till funktionen sker nu utan parametrar:

<form action="ny_anvandare.php" method="POST" name="albumform" onSubmit="return(checkForm());">

 

 

[inlägget ändrat 2005-01-06 09:59:16 av Anjuna Moon]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...