Form validering driller

der ligger et problem her

for (i = 1; i < antalfejl; i++)
{
	document.getElementById('fejlbesked' + i).innerHTML = fejlbesked[i];
}

dit fejl array vil se sådan ud hvis kun emne er udfyldt

fejlbesked[1] = "Du har ikke udfyldt fornavn";
fejlbesked[2] = "Du har ikke udfyldt efternavn";
fejlbesked[3] = "Du har ikke udfyldt telefon";
fejlbesked[4] = "Du har ikke udfyldt din email";
fejlbesked[6] = "Du har ikke skrevet en besked";

måske du skulle droppe den for loop, og udskrive fejl beskeden direkte inde i if sætningen

jeg har omskrevet dit JS lidt, så jeg anvender et array mere.
et array holder styr på nummeret på fejl feltet, og et på fejlen.
(meget hurtigt omskrevet, og langt fra gennemtested)

man kunne godt lave det som et multi dim array, men er vist lidt overkille i forste omgang

// JavaScript Document
window.addEventListener('load', function ()
{
	document.getElementById("kontaktform").onsubmit = valider;
});

function valider()
{
	var fejlbesked = Array();
	var fejlnummer = Array();
	var i;

	// nulstiler alle fejl beskeder
	for(i=1; i<7; i++)                {
		document.getElementById('fejlbesked' + i).innerHTML = "";
	}

	if (document.getElementById("input-fornavn").value == "")
	{
		fejlnummer.push(1);
		fejlbesked.push("Du har ikke udfyldt fornavn");
	}
	if (document.getElementById("input-efternavn").value == "")
	{
		fejlnummer.push(2);
		fejlbesked.push("Du har ikke udfyldt efternavn");
	}
	if (document.getElementById("input-telefon").value == "")
	{
		fejlnummer.push(3);
		fejlbesked.push("Du har ikke udfyldt telefon");
	}
	if (document.getElementById("input-email").value == "")
	{
		fejlnummer.push(4);
		fejlbesked.push("Du har ikke udfyldt din email");
	}
	else
	{
		var regexpmail = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
		if (!regexpmail.test(document.getElementById("input-email").value))
		{
			fejlnummer.push(4);
			fejlbesked.push("Du har skrevet en ugyldig email");
		}
	}
	if (document.getElementById("input-emne").value == "")
	{
		fejlnummer.push(5);
		fejlbesked.push("Du har ikke skrevet noget i emne");
	}
	if (document.getElementById("input-besked").value == "")
	{
		fejlnummer.push(6);
		fejlbesked.push("Du har ikke skrevet en besked");
	}
	var antalfejl=fejlnummer.length; // istedet for at tælle op i hver hver gang der opstår en fejl
	if (antalfejl == 0)
	{
		return true;
	}
	else{
		for (i = 0; i < antalfejl; i++)
		{
			var nr =fejlnummer[i];
			document.getElementById('fejlbesked' + nr).innerHTML = fejlbesked[i];
		}
		return false;
	}
}

afprøv det og lad dig inspirarer.

årsagen er at du ikke udskriver den tomme fejl besked, før du tester og dermed nulstiller teksten igen

document.getElementById("fejlbesked1").innerHTML = fejlbesked[1]; // <-- denne linje indsat
if( document.getElementById("input-fornavn").value == "")
{
	antalfejl += 1;
	fejlbesked[1] = "Du har ikke udfyldt fornavn";	
}

det sammen skal selvføgelig gøres på de andre fejlbesked felter også


det kunne være man skulle lave det som et loop, så du starter med at nulstille alle fejlbeskeder, før du tester om indput felterne er udfyldt
hvorfor starter du med index 1 ?? array starter med index 0 så du har en tom plads i dit fejlbesked array (fejlbesked[0])

Hej Ronny
Tak for dit svar

Jeg har prøvet at sætte koden ind og det virker bedre den laver dog stadig fejl hvis jeg køre den trykker send så alle fejl kommer frem, skriver noget i emne så fjerner den både fejlen til emne og til besked

http://jsfiddle.net/e48km12c/1/

Det med arrays var fordi jeg ikke kunne få det til at virke, så læste jeg at den startede på 0 og det gav mere mening men der stod også man kunne hoppe den over og så gjorde jeg det bare fordi det var hurtigere end at ændre numrende

Ja Ronny du har nok ret i at det er meget nemmere
det var også kun for at lære noget om loops men jeg kaster mig over noget andet for at lære dem

Ronny du er genial det virker

Nu vil jeg lige sætte mig ind i det så jeg kan se om jeg også forstå det

Jeg syntes Ronny's kode er rigtig fin og et godt udgangspunkt, men jeg ville nok dele det lidt mere op. Og fjerne load eventlistneren. Hvis du ligger dine javascript scripts allerneders på din side lige inden </body></html> får du flere fordele:

* Siden vil load hurtigere
* Dit indhold vil være loadet.

Så istedet for load kaldet kan du lave:

 (function () {
    document.getElementById("kontaktform").onsubmit = valider;
 
    function valider() {
    ...
    }
 })();

Du kunne herefter samle dine fejlbeskeder i en variable så du ikke skal skrive den samme besked flere gange:

 var messages = {
         "empty" : "Du har ikke udfyldt {{field}}",
         "email"  :  "Du har ikke skrevet en gyldig email",
         ...
    };
 
    // fejl besked kan så laves til:
    if (document.getElementById("input-emne").value == "")
    {
       fejlnummer.push(5);
       fejlbesked.push(messages.empty.replace("{{field}}", "emne"));
    }

Men den del ville jeg nok også lave om, for du skal definere det for hvert id, her kunne man evt. bruge en class i stedet. og evt. en type. Nu vil jeg ikke skrive hele koden, men bare lidt pseudo kode. For det kode du har nu virker jo, men det er et eksempel til hvad du kan gøre i fremtiden så scriptet er mere genbrugeligt.


dine html elementer kunne hedde noget i stilen med

 <input type="text" class="text" value="" placeholder="Email emne" name="emne">
 <input type="text" class="text email" value="" placeholder="Email" name="email">

Din javascript kan så lave

 errors = {}
 foreach input.text 
    if value.trim() = ""
         errors[input] = error[input || []
         errors[input].push("<li>"+ messages.empty.replace("{{field}}", input.name +"</li>")
 
 
 foreach input.email 
    if !checkEmail(value)
         errors[input] = error[input] || []
         errors[input].push("<li>"+ messages.email.replace("{{field}}", input.name +"</li>")
 
 
 foreach errors as key => error
    key.nextSibling.innerHTML = "<ul>" + error.join("") + "</ul>"

Nu vil jeg lige sætte mig ind i det så jeg kan se om jeg også forstå det

når du har forstået den så prøv at kigge på denne, der bygger på det sammen, men lavet med et array af objecter, hvilke efter min mening er meget pænere, nemmere at udvide, og man slipper for de 2 array altid skal følges ad

function valider()
{
    var fejlbesked = Array();    
    var i;

    // nulstiler alle fejl beskeder
    for(i=1; i<7; i++)                
	{
        document.getElementById('fejlbesked' + i).innerHTML = "";
    }

    if (document.getElementById("input-fornavn").value == "")
    {        
        fejlbesked.push({nr:1, msg:"Du har ikke udfyldt fornavn" } ); // som obj
		// hvor vil jeg gerne have plinger om nr og msg
		// fejlbesked.push({"nr":1, "msg":"Du har ikke udfyldt fornavn" } ); // som obj
    }
    if (document.getElementById("input-efternavn").value == "")
    {        
        fejlbesked.push({nr:2, msg:"Du har ikke udfyldt efternavn" } );
    }
    if (document.getElementById("input-telefon").value == "")
    {        
        fejlbesked.push({nr:3, msg:"Du har ikke udfyldt telefon" } );
    }
    if (document.getElementById("input-email").value == "")
    {        
        fejlbesked.push({nr:4, msg:"Du har ikke udfyldt din email" } );
    }
    else
    {
        var regexpmail = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
        if (!regexpmail.test(document.getElementById("input-email").value))
        {            
            fejlbesked.push({nr:4, msg:"Du har skrevet en ugyldig email" } );
        }
    }
    if (document.getElementById("input-emne").value == "")
    {        
        fejlbesked.push({nr:5, msg:"Du har ikke skrevet noget i emne" } );
    }
    if (document.getElementById("input-besked").value == "")
    {       
        fejlbesked.push({nr:6, msg:"Du har ikke skrevet en besked" } );
    }
    var antalfejl=fejlbesked.length;
    if (antalfejl == 0)
    {
        return true;
    }
    else{
        for (i = 0; i < antalfejl; i++)
        {            
            document.getElementById('fejlbesked' + fejlbesked[i].nr).innerHTML = fejlbesked[i].msg;
        }
        return false;
    }
}

som Dan er inde på, så prøv at lave din code mere generisk, så spare meget tid i længden.
men ja det grundlæggende som min tidligere code skal være på plads først