Permalänk
Medlem

Kontrollera input med onblur

Har ett litet enkelt formulär som ska räkna ut lite grejer och jag skulle behöva något sätt att kontrollera vad man skrivit in i formulären.
Det fungerar just nu men det blir inte så snyggt och det är inte helt rätt.Metoden onblur borde kunna fungera för det jag tänkt mig tror jag?

Anyway, jag har en funktion som ser ut såhär;

function calcSVT() { var tid = document.getElementById('time').value; var strecka = document.getElementById('distance').value; var hastighet = document.getElementById('speed').value; if (checkInput(strecka) == true && checkInput(tid) == true) { //sträcka och tid ifyllt, räkna ut hastigheten document.getElementById('speed').value = setMaxTwoDecimals(strecka / tid); } else if (checkInput(tid) == true && checkInput(hastighet) == true) { //tid och hastighet är ifyllt, räkna ut sträcka document.getElementById('distance').value = setMaxTwoDecimals(hastighet * tid); } else if (checkInput(hastighet) == true && checkInput(strecka) == true) { //hastighet och sträcka är ifyllt, räkna ut tid document.getElementById('time').value = setMaxTwoDecimals(strecka / hastighet); } else { alert("Du måste fylla i två värden för att kunna räkna ut det tredje."); } }

Samt en "checkinput" som ser ut såhär;

function checkInput(tal) { if (tal.indexOf(",") > -1) { alert("Vänligen använd . istället för ,"); return false; } // Kollar om fältet är ifyllt och sätter värdet till true om length är större än 0. Sätter annars till false. if (tal.length> 0) { return true; } else { return false; } }

I HTML-koden ser det ut såhär;

<div id="formcontainer"> <div class="svt"> <span>Sträcka</span> <input id="distance" type="text"/> <span>(kilometer)</span> <br/> <br/> <span>Tid</span> <input id="time" type="text"/> <span>(timmar)</span> <br/> <br/> <span>Hastighet</span> <input id="speed" type="text"/> <span>(km/h)</span> </div> <br/> <br/> <input type="button" onclick="calcSVT()" value="Räkna ut" /> </div>

Så.. då är frågan, hur ska man kunna använda onblur här för att få det att fungera? Onblur måste ju anropa checkinput-funktionen efter varje textfält och kolla så att det blir ett true, hur man ska få till det i praktiken vet jag inte riktigt och tänkte att någon kanske hade någon idé

Som det är nu så får man ju upp två stycken alerts om att man måste använda . istället för , och en alert som säger "Du måste fylla i två värden för att kunna räkna ut det tredje" när man skrivet ett kommatecken. Det ska bara finnas en alert är det tänkt.

Permalänk
Medlem

Alert är generellt sätt väldigt fult (tycker jag) och jag rekommenderar nästan aldrig det.
Tvinga inte användaren att ändra "," till ".". Det kan du göra "bakom kulisserna".
Om man ändå måste klicka på "Räkna ut" kan du inte göra valideringen där istället?

Visa signatur

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

Permalänk
Medlem

Kan hålla med om att det är fult, men tycker ändå det blir en rätt smidig lösning i det här fallet.
Frågan är hur man ska implementera det i koden, försökt på massor av sätt men får inte till det.

Antar det är något liknande;

<input id="time" type="text"/ onblur="checkInput" (this.value) >

Men hur jag sen ska göra med ursprungsfunktionen för att den ska kontollera både så att fälten inte är tomma och kolla om det är ett komma eller punkt inskriven vet jag inte riktigt.

*Edit*
Tror det löste sig nu med hjälp av just kodraden ovan.