Permalänk

JS-validering fungerar inte!

Hej,
Har ett litet problem med JS-valideringen som vägrar fungera.

Det som ska valideras är följande:

<form action="" method="post">
<p class="white"><b>Regissör:</b><input onkeyup="validate(this);" type="text" name="regissor"/>
<span id="feedback"> minst 1 tecken</span>
<input type="submit" name="submit" value="Lägg till" /></p>
</form>

När man lägger till två bokstäver i "Regissörs"-rutan ska det stå OK!, om två bokstäver inte är ifyllda ska det stå FEL!

firstFeedback = document.getElementById('firstfeedback');
nameFornamn = document.getElementById('fornamn');

nameFornamn.addEventListener('keyup', function(){
//v = nameField.value;
//alert(v);
l = nameFornamn.value.length;
//alert(l);
if (l >= 2) {
firstFeedback.innerHTML = "OK!";
firstFeedback.style.color = "GREEN";
}

else if (l < 2) {
firstFeedback.innerHTML = "FEL!";
firstFeedback.style.color = "RED";
fail = true;
}

},false);

Hur ska jag baka in ovanstående JS-kod så att det validerar ovanstående?

Är relativt n00big så all hjälp uppskattas!

Tack i förhand!

Permalänk
Medlem
Skrivet av Mr.Awesome:

Hej,
Har ett litet problem med JS-valideringen som vägrar fungera.

Det som ska valideras är följande:

<form action="" method="post">
<p class="white"><b>Regissör:</b><input onkeyup="validate(this);" type="text" name="regissor"/>
<span id="feedback"> minst 1 tecken</span>
<input type="submit" name="submit" value="Lägg till" /></p>
</form>

När man lägger till två bokstäver i "Regissörs"-rutan ska det stå OK!, om två bokstäver inte är ifyllda ska det stå FEL!

firstFeedback = document.getElementById('firstfeedback');
nameFornamn = document.getElementById('fornamn');

nameFornamn.addEventListener('keyup', function(){
//v = nameField.value;
//alert(v);
l = nameFornamn.value.length;
//alert(l);
if (l >= 2) {
firstFeedback.innerHTML = "OK!";
firstFeedback.style.color = "GREEN";
}

else if (l < 2) {
firstFeedback.innerHTML = "FEL!";
firstFeedback.style.color = "RED";
fail = true;
}

},false);

Hur ska jag baka in ovanstående JS-kod så att det validerar ovanstående?

Är relativt n00big så all hjälp uppskattas!

Tack i förhand!

elementet med id 'firstfeedback' existerar inte
elementet med id 'fornamn' existerar inte

Du borde få dessa fel på en gång i exempelvis Firefox Javascript Error Console.

Det ser ut som om du försöker lägga till valideringen på två sätt. keyup-attributet samt eventlistener. Bara en är tillräcklig, men du måste som sagt ha rätt element när du gör det.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk
Medlem

På "regissor" har du ett anrop till en funktion "validate" som inte finns. Lite senare försöker du sätta en event-listener på element "fornamn", som du verkar ha glömt lägga till.

Du försöker lösa problemet på två sätt och lägger halva lösningen i varje variant

Visa signatur

Kom-pa-TI-bilitet

Permalänk

Hur ska den korrekta koden se ut?
Har provat fram och tillbaka i ett antal timmar nu, men får det bara inte att fungera. Ständigt något nytt fel.
Vore extremt tacksam om någon kunde skriva den korrekta koden samt vilka fel jag gjorde!

Permalänk
Medlem
Skrivet av Mr.Awesome:

Hur ska den korrekta koden se ut?
Har provat fram och tillbaka i ett antal timmar nu, men får det bara inte att fungera. Ständigt något nytt fel.
Vore extremt tacksam om någon kunde skriva den korrekta koden samt vilka fel jag gjorde!

Egentligen hade jag gjort det med jQuery.
På detta vis hade jag gjort det utan jQuery:

http://jsfiddle.net/cEDr3/

Du bör lägga till att man inte kan skicka formuläret utan att ha passerat samma validering.

Felen har vi egentligen redan pratat om. Du försökte kalla på element med specifika id:n som inte existerade. Du försökte knyta två event till något som bara ska ske en gång. Du kallade på en metod som inte existerade.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk

Yes, tack så jättemycket för hjälpen!
Lyckades få all bokstavs-validering att fungera korrekt nu.
Dock så återstår siffervalidering, siffror valideras inte.

JS-koden ser ut som följande:
document.getElementById('nummer').addEventListener('keyup', function() {
v = namenummer.value;
//alert(v);
l = namenummer.value.length;
//alert(l);
if (l >= 5) {
if (parseInt(v)) {
nummerFeedback.innerHTML = "OK!";
nummerFeedback.style.color = "GREEN";
isOK[7] = true;
}
}

else if (l < 5 || !parseInt(v)) {
nummerFeedback.innerHTML = "FEL!";
nummerFeedback.style.color = "RED";
isOK[7] = false;
}

},false);

Och HTML-koden ser ut som följande:
<p class="white"><b>Tillverkad:</b><input type="text" id="nummer"/> <span id="nummerFeedback">ex. 2001</span></p>

Vad gör jag för fel nu? SpanID står väl korrekt, likaså allting annat eller har jag missat något?

Permalänk

Undrar för övrigt vad du menar med att du hade använt jQuery istället? Har jQuery funktioner för form-validering?
Helvete vad jobb jag har gjort i onödan i sådana fall!

Permalänk

Lyckades få "Film" att lysa OK!, men när jag klickar på "Lägg till" händer ingenting, så antar att jag gjort något fel i formuläret? Någon som vet vart det kan ha gått snett?