Rödmarkera felaktiga textfält

21 december, 2004

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?

21 december, 2004

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]

21 december, 2004

Jo det fungerar rätt ok men postar man sedan fel en gång till så blir där en röd stjärna till.

Det finns inte någon annan lösning?

21 december, 2004

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]

22 december, 2004

Den skriver aldrig ut någon röd stjärna nu när jag provar även om något fält är tomt.

22 december, 2004

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];

28 december, 2004

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?

28 december, 2004

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]

28 december, 2004

Nu fungerar det perfekt.

Tusen tack för hjälpen.

4 januari, 2005

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.

4 januari, 2005

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>

Ä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)

5 januari, 2005

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.

5 januari, 2005

Har du en adress till sidan som den ser ut nu?

5 januari, 2005

Ja koden ser ut så här nu:

http://www.anderberg.name/kod.txt

5 januari, 2005

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]

5 januari, 2005

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?

6 januari, 2005

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]

8 januari, 2005

Tack så mycket fungerar perfekt.

Rödmarkera felaktiga textfält

Rekommendera Poster

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anderberg

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 19 gäster (Visa hela listan)

Populära medlemmar

Publika meddelanden

Senaste som Tittar

Senaste inlägg

Forum

Aktivitet

pcforalla.se