Søg
Avatar billede haolan Nybegynder
23. juli 2007 - 19:58 Der er 22 kommentarer og
2 løsninger

Dynamisk validering

Hej Eksperter

Jeg skal bruge en form for dynamisk validering, der løbene tjekker om en bruger taster gyldige oplysninger.

Jeg har en function der tester på om fx en email er valid, men jeg ved kun hvordan man kalder den ved tryk på en knap.

Jeg vil gerne have så den sætter et grønt mærke ud for feltet når det indeholder en gyldig mail og evt et rødt hvis feltet er tomt eller mail adressen er ugyldig.

Efterfølgene vil jeg gerne have at når alle valideringer er godkendt skal baggrundsfarven på den table eller div at formularen nu er i bliver farvet grøn, så man er klar til at trykke næste side.

Hvordan laver man de former for dynamisk validering?
Avatar billede w13 Novice
23. juli 2007 - 20:21 #1
Jeg har ikke selv lavet en sådan kode, men hvis du har valideringskoden, burde det ikke være et problem. Bare kald valideringen i en onkeydown-attribut i hvert af felterne, som skal tjekkes. Så køres valideringen hver gang, der trykkes på en tast.
Avatar billede kalp Novice
23. juli 2007 - 20:47 #2
Nu er det her ikke SMUKT eller noget, men det er bare inspiration og det burde være nok til, at du kan bikse resten sammen selv.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<script type="text/javascript">
function checkForm()
{
  var email = "false";
  if(document.getElementById("email").value.indexOf("@") > 0) { document.getElementById("emailid").innerHTML = "V";  email = "true"; }
  var password = "false";
  if(document.getElementById("password").value.length > 3) { document.getElementById("passwordid").innerHTML = "V";  password = "true"; }
 
  if(email == "true" && password == "true") { document.getElementById("kalpsTable").style.background = "#00FF00"; };
}
</script>

</head>

<body>
<p>&nbsp;</p>
<table id="kalpsTable"  onkeypress="checkForm();" width="200" border="0" style="background:#0000FF">
  <tr>
    <td>email</td>
    <td><input type="text" id="email" name="email" /></td>
    <td id="emailid">*</td>
  </tr>
  <tr>
    <td>password</td>
    <td><input type="text" name="password" /></td>
    <td id="passwordid">*</td>
  </tr>
</table>
<p>* p&aring;kr&aelig;vet </p>
<p>&nbsp; </p>
</body>
</html>
Avatar billede kalp Novice
23. juli 2007 - 20:47 #3
(ingen kommentar til koden - det er blot lavet for at illustrere:P )
Avatar billede haolan Nybegynder
23. juli 2007 - 21:34 #4
tsk tsk sikke en grim kode.. :P

Ej gas.. det er lige præcis hvad jeg leder efter :)
Man kan vel blot sætte en <img> tag ind istedet for det der "v" ?

Hvad angår password virker det ikke i din kode, den retter det ikke til et V når man har skrevet over 3 tegn og derved ændres baggrundsfarven ikke... Ved ikke lige hvor det går galt..
Avatar billede haolan Nybegynder
23. juli 2007 - 21:38 #5
ahh fandt fejlen.. du mangler lige ID i password input..

Men den mangler lige at rette det tilbage igen hvis man nu ændre i det først indtastede password, altså så det bliver til en * igen og farven bliver blå igen..
Avatar billede olebole Juniormester
23. juli 2007 - 22:13 #6
<ole>

innerHTML er ikke, har aldrig været og bliver aldrig valid - og er komplet yt i XHTML (også selvom det bare er XHTML 1.0 Transitionel, som bortset fra nogle ligegyldige, kosmetiske detaljer er er lig HTML 4.01 Strict). Brug i stedet DOM ... f.eks:
    document.getElementById("passwordid").firstChild.nodeValue = "V

/mvh
</bole>
Avatar billede olebole Juniormester
23. juli 2007 - 22:14 #7
- njaaaahhhh:
    document.getElementById("passwordid").firstChild.nodeValue = "V";
Avatar billede haolan Nybegynder
23. juli 2007 - 23:04 #8
Oki takker..  Hvordan får jeg den til at rette tilbage igen hvis jeg nu har indtastet en gyldig e-mail og derefter sletter @ fx, så er mailen jo ikke længere gyldig, men valideringen betragter den stadig som gyldig..?
Avatar billede w13 Novice
23. juli 2007 - 23:06 #9
<script type="text/javascript">
function checkForm()
{
  var email = "false";
  if(document.getElementById("email").value.indexOf("@") > 0) { document.getElementById("emailid").innerHTML = "V";  email = "true" }
  else { document.getElementById("emailid").innerHTML = "X"; email = "false" }
  var password = "false";
  if(document.getElementById("password").value.length > 3) { document.getElementById("passwordid").innerHTML = "V";  password = "true"; }
  else { document.getElementById("passwordid").innerHTML = "X"; password = "false" } 
  if(email == "true" && password == "true") { document.getElementById("kalpsTable").style.background = "#00FF00" }
}
</script>
Avatar billede kalp Novice
23. juli 2007 - 23:07 #10
olebole >> I know.. men han skal heller ikke bruger innerHTML;) han skal lege med billeder så det var bare for at lave noget hurtigt kode til, at illustrere det:)

skulle lige til at lave det til dig, men nu har w13:)
Avatar billede haolan Nybegynder
23. juli 2007 - 23:14 #11
ok w13, men med din måde skal man altid lige trykke én gang mere i feltet før valideringen kommer, hvilket vil sige at hvis man kun fjerner @ uden at trykke igen, bliver der ikke valideret.. Kan man ikke få den til at validere med det samme?
Avatar billede w13 Novice
23. juli 2007 - 23:16 #12
Hov, det var også Kalps løsning, jeg var bare hurtigere. :P

Jo, måske hvis du ændrer onkeypress til onkeydown eller onkeyup eller noget.. det er svært at afgøre lige nu. Det er alt for sent på aftenen. :)
Avatar billede kalp Novice
23. juli 2007 - 23:18 #13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<script type="text/javascript">
function checkForm()
{
  var email = "false";
  if(document.getElementById("email").value.indexOf("@") > 0) { document.getElementById("emailid").innerHTML = "V";  email = "true"; }
  else { email = "false"; }
  var password = "false";
  if(document.getElementById("password").value.length > 3) { document.getElementById("passwordid").innerHTML = "V";  password = "true"; }
  else { password = "false"; }
 
  if(email == "true" && password == "true") { document.getElementById("kalpsTable").style.background = "#00FF00"; } else { document.getElementById("kalpsTable").style.background = "#0000FF"; }
 
 
}
</script>

</head>

<body>
<p>&nbsp;</p>
<table id="kalpsTable"  onkeyup="checkForm();" onkeypress="checkForm();" width="200" border="0" style="background:#0000FF">
  <tr>
    <td>email</td>
    <td><input type="text"  id="email" name="email" /></td>
    <td id="emailid">*</td>
  </tr>
  <tr>
    <td>password</td>
    <td><input type="text" id="password"  name="password" /></td>
    <td id="passwordid">*</td>
  </tr>
</table>
<p>* p&aring;kr&aelig;vet </p>
<p>&nbsp; </p>
</body>
</html>
Avatar billede haolan Nybegynder
23. juli 2007 - 23:21 #14
det var onkeyUp :)

Så lige en sidste ting..
Hvordan vil i løse det med et billede frem for en tekst?
Min idé er måske med at indsætte en <span id='validatePic' style='background: url('blabla');'></span>

Og så noget i stil med document.getElementById("validatePic).style.backgrould = url('blablabla');

Kan det mon bruges?
Avatar billede w13 Novice
23. juli 2007 - 23:22 #15
ingen dårlig løsning. husk dog også lige at sætte width og height.
Avatar billede haolan Nybegynder
23. juli 2007 - 23:28 #16
jep self...

kalp og w13 i to må dele points :) så smid svar begge to..
Og takker mange gange for en suveræn hjælp
Avatar billede kalp Novice
23. juli 2007 - 23:28 #17
ja nu bliver det vel også kritiseret for ikke er være valid html, men det virker.

<img src="sti til billede" id="xxx" />

du retter billedet via.

document.getElementById("xxx").src = "ny sti";
Avatar billede olebole Juniormester
23. juli 2007 - 23:34 #18
- og ja, det er en fejl, at det gør det. Siden 1999 har vi skulle skrive:
    document.getElementById("xxx").setAttribute("src", "ny sti");

Specielt under XHTML er det hamrende vigtigt. Når browserne engang begynder at understøtte XHTML, vil browseren gå ned med en fejl, hvis man bruger den gamle syntaks  =)
Avatar billede kalp Novice
23. juli 2007 - 23:43 #19
olebole >> hvilket site benytter du dig af til "quick look up"? (ud over dit hoved selvfølgelig)
Avatar billede olebole Juniormester
23. juli 2007 - 23:56 #20
Efterhånden primært hovedet, men ellers bruger jeg med hensyn til frontend kode:

HTML 4.01:
    http://www.w3.org/TR/html401/
- top-links er virkelig gode

CSS:
    http://www.w3.org/TR/CSS21/
- her er top-links også uundværlige

DOM:
    http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/
    http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ecma-script-binding.html

java script:
    http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference
    http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide

JScript:
    http://msdn2.microsoft.com/en-us/library/yek4tbz0.aspx

Browser-specifikke ting omkring DOM, CSS, scripting:
    http://msdn2.microsoft.com/en-us/library/yek4tbz0.aspx
    http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

Når det er mere langhårede ting, der skal tjekkes:
    http://www.ecma-international.org/publications/standards/Ecma-262.htm
ECMA 262 Version 3 er den standard både JavaScript, JScript og VBScript bygger på, men forvent ikke, pdf'en bidrager med ret meget - med mindre, du er meget teoretisk interesseret

- plus diverse andre, men dette er nok mine 'mest slidte' links vedr. klientkode  =)
Avatar billede olebole Juniormester
24. juli 2007 - 00:00 #21
- og blandt 'quickies' er Brian's site slet ikke skidt:
    http://www.blooberry.com/indexdot/html/index.html
    http://www.blooberry.com/indexdot/css/index.html
Avatar billede kalp Novice
24. juli 2007 - 00:04 #22
olebole >> tak - hermed vil jeg bestræbe mig fremover, at levere validerbar og gyldig kode til dem, som får kodestumper fra mig:D

min taktik normalt er, at udvikle til Firefox og rette til så det også virker i IE efterfølgende:D !
Avatar billede olebole Juniormester
24. juli 2007 - 00:11 #23
kalp >> selvtak. Jeg ved, det er svært! Der bliver skrevet så meget vrøvl i tutorials og artikler, at det er umuligt at skelne skidt fra kanel - med mindre man virkelig står på hovedet i de primære kilder.

Jeg ved udmærket, jeg virker som en rød klud på mange her på E, men jeg insisterer ikke desto mindre på at rette koder og kodevaner, når jeg ser noget skidt. Hvis folk, der ved, hvordan koden _bør_ skrives, sidder på tungen - og begyndere og let øvede overlades til alle vrøvlehovederne - er det jo helt umuligt for dem at lære at kode ordentlig  ;o)
Avatar billede w13 Novice
24. juli 2007 - 15:41 #24
Jeg takker også lige for en god oversigt over links, Ole :)
Og bringer et svar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »