Avatar billede kratluskeren Nybegynder
07. november 2005 - 22:54 Der er 37 kommentarer og
1 løsning

Datovalidering på to felter med Roenvings WD3Input

Hej jeg har et problem med denne:
http://roenving.users.whitehat.dk/WD3Input.html

Problemet er hvis jeg benytter valideringen på to felter i samme form, så forstyrrer felterne hinanden og flytter datoerne rundt når man navigerer med tabulator.

Er ikke så skarp til javascript og ingen tid til at løse det selv.

Nogen der har en løsning?
Avatar billede johan.o Nybegynder
08. november 2005 - 01:43 #1
Kan du ikke vise hvordan din kode ser ud ?

Mvh. Johan
Avatar billede kratluskeren Nybegynder
08. november 2005 - 09:34 #2
Koden er præcis som i eksemplet

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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>testside</title>
<script language="javascript" type="text/javascript">
var newVal="";
var fdate = null;
var dd=0;
var mm=0;
var repeatRemove=0;

function getCharCode(e){
return (e.which)?e.which:e.keyCode;
}

function restoreVal(eC,fld){
    if (eC==8||repeatRemove>0){
        if (newVal.length>repeatRemove){
              newVal=newVal.substring(0,newVal.length-repeatRemove)
        }else{
            newVal="";
        }
    }
    repeatRemove=0;
    fld.value=newVal;
}

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = getCharCode(e);
if ((fld.value.length==2 || fld.value.length==5) && charCode==45){newVal+="-";return true;}
if (fld.value.length==10 || charCode>57 || charCode<48){
    return false;
    }

newVal=fld.value+String.fromCharCode(charCode);

switch (fld.value.length){
    case 0:
          if (+newVal>3){repeatRemove++;return false;}
          break;
      case 1:
          if (+newVal>31){repeatRemove++;return false;}
          if (+newVal==00){repeatRemove++;return false;}
          dd = +newVal;
          newVal+="-";
          break;
      case 2:
          newVal=fld.value+"-"+String.fromCharCode(charCode);
          if (charCode>49){repeatRemove++;return false;}
          break;
      case 3:
          if (charCode>49){repeatRemove++;return false;}
          break;
      case 4:
        mm = parseInt(newVal.substring(3),10);
        if (mm==2 && dd>29 || mm>12 || mm==00){repeatRemove++;return false;}
        if (dd==31 && (mm==4 || mm==6 || mm==9 || mm==11)){repeatRemove++;return false;}
        newVal+="-";
        break;
    case 5:
          newVal=fld.value+"-"+String.fromCharCode(charCode);
          break;
      case 6:
          if (charCode<50 || charCode>50){repeatRemove++;return false;} //Tillader 2 som første tal i årstal
          break;
      case 7:
          var yy = parseInt(newVal.substring(6));
          if (yy<20 || yy>20){repeatRemove++;return false;} //Tillader 20 som første to tal i årstal
          break;
      case 8:
          var yyy = parseInt(newVal.substring(6));
          if (yyy>200){repeatRemove++;return false;} //Tillader kun 0 som tredje tal, hvis første to er 2 og 0.
          break;
      case 9:
          var yyyy = parseInt(newVal.substring(6));
          if (mm == 2 && dd == 29 && yyyy%4 !=0){repeatRemove+=8;return false;}
}
return true;
}
</script>
</head>

<body>
<form id="frmTest">
dato 1 <INPUT onkeypress="return inputDate(event,this);" onkeydown="if(getCharCode(event)==8)repeatRemove++;" onblur="if(this.value=='')this.value=this.defaultValue;" onkeyup="restoreVal(getCharCode(event),this);this.focus();" onfocus="if(this.value==this.defaultValue)this.value='';" maxLength=10 size="12" value="dd-mm-åååå"> <br />
dato 2 <INPUT onkeypress="return inputDate(event,this);" onkeydown="if(getCharCode(event)==8)repeatRemove++;" onblur="if(this.value=='')this.value=this.defaultValue;" onkeyup="restoreVal(getCharCode(event),this);this.focus();" onfocus="if(this.value==this.defaultValue)this.value='';" maxLength=10 size="12" value="dd-mm-åååå">
</form>
</body>
</html>
Avatar billede kratluskeren Nybegynder
08. november 2005 - 09:36 #3
...og har naturligvis normalt givet de to input felter hver deres id, hvilket jeg ikke lige fik tilføjet til ovenstående :)
Avatar billede johan.o Nybegynder
08. november 2005 - 10:23 #4
Ja okay nu kan jeg se hvad problemet er :)

Prøv at udskifte onkeyup på begge knapper med dette :

onkeyup="if(getCharCode(event)!=9)restoreVal(getCharCode(event),this);this.focus();"

og lad os høre om det har en effekt.

Derudover bliver du sikkert snart gjort opmærksom på noget med at browsere ikke kan parse xhtml men jeg er ikke lige inde i det stof, det vigtige i denne forbindelse er at selv om jeg bruger en strict doctype (som validerer) opstår/opstod problemet med tab også.

Mvh. Johan
Avatar billede johan.o Nybegynder
08. november 2005 - 10:24 #5
Ovenstående disabler tab funktionen (event.keyCode 9), men den virker jo alligevel ikke perfekt i forvejen (naturligvis) :)

Mvh. Johan
Avatar billede kratluskeren Nybegynder
08. november 2005 - 10:31 #6
Hmm, virker stadig ikke. Den flytter stadig datoen hen til det felt jeg tapper til.
Avatar billede johan.o Nybegynder
08. november 2005 - 10:44 #7
Hm, okay prøv så udover den tidligere 'rettelse' at tilføje flg. til funktionen inputDate().

Efter denne linje : charCode = getCharCode(e);
skriver du : if(charCode==9) return false;

Mvh. Johan
Avatar billede johan.o Nybegynder
08. november 2005 - 10:57 #8
Hm, det var dog s..... den gør det da stadig......

Hvad med :

onkeydown="if(getCharCode(event)==9){return false;}if(getCharCode(event)==8)repeatRemove++;"

onkeyup="if(getCharCode(event)==9){return false;}else{restoreVal(getCharCode(event),this);this.focus();}"

Mvh. Johan
Avatar billede kratluskeren Nybegynder
08. november 2005 - 13:45 #9
hmm,den holder heller ikke, for det er jo ikke interessant at miste muligheden for at tappe. Der må være en årsag til at felterne ikke bliver behandlet forskelligt
Avatar billede johan.o Nybegynder
08. november 2005 - 13:48 #10
Okay okay, nu har jeg gået med hunden, og tænkt lidt over hvad der sker :)

Du fjerner focus fra dato felterne ved at trykke et sted på body med musen. Når du så trykker tab, 'hopper' focus til dit første dato felt, når du så slipper tab tasten registrer onkeyup dette og fyrer så restoreVal() af. Problemet er at scriptet kan stadig huske den værdi du tastede ind i det andet datofelt, så når den opdaterer dato 1 skriver den datoen fra dato 2. Derfor burde følgende lille ændring til restoreVal() løse problemet.

function restoreVal(eC,fld){
    if (eC==9) return;
    if (eC==8||repeatRemove>0){
        if (newVal.length>repeatRemove){
              newVal=newVal.substring(0,newVal.length-repeatRemove)
        }else{
            newVal="";
        }
    }
    repeatRemove=0;
    fld.value=newVal;
}

Eneste ændring er tilføjelsen af if(eC==9) return; dette skulle gøre at i tilfælde af at det der trikker funktionen er et slip af tab tasten (keyCode 9) skal der intet gøres.

Venter i spænding på at høre om ikke det løste problemet :)

Mvh. Johan
Avatar billede johan.o Nybegynder
08. november 2005 - 13:50 #11
Du skal naturligvis glemme de andre ændringer :)

Mvh. Johan
Avatar billede kratluskeren Nybegynder
08. november 2005 - 14:00 #12
Se det var meget bedre, men den brokker sig stadig hvis jeg tapper tilbage. (shift+tap)
Mon ikke dette kan rettes samme sted?
Avatar billede johan.o Nybegynder
08. november 2005 - 14:04 #13
Hm, det kan jeg ikke lige få den til. Hvordan gør du præcis ?

Mvh. Joha
Avatar billede kratluskeren Nybegynder
08. november 2005 - 14:08 #14
Hvis du eksempelvis udfylder begge felter og så tapper lidt frem og tilbage. Så skifter den lige pludselig
Avatar billede johan.o Nybegynder
08. november 2005 - 14:30 #15
Uhm, prøv dette :

Istedet for : if (eC==9) return;

så skriv : if (eC==9 || eC==16) return;

Har ikke testet men lad mig høre.

Mvh. Johan
Avatar billede johan.o Nybegynder
08. november 2005 - 16:42 #16
Tror jeg har lavet scriptet således at det kan producere alle datoer frem til år 9999 og samtidig tage hensyn til skudår.

Udskift case 6 - 9 med det her :

case 6:
if (charCode<50){repeatRemove++;return false;} //Tillader 2 som laveste første tal i årstal
break;
case 7:
break;
case 8:
break;
case 9:
var y = parseInt(newVal.substring(9));
if (mm == 2 && dd == 29) {
  if((y/2)!=Math.floor(y/2)) { return true; }
  oL = new Array("0","2","4","6","8");
  oU = new Array("1","3","5","7","9");
  for(i=0; i<oL.length; i++) {
  if(parseInt(newVal.substr(8,1))==oL[i]) {
    if(parseInt(newVal.substring(9))!=0 && parseInt(newVal.substring(9))!=4 && parseInt(newVal.substring(9))!=8) {
    return true; } } }
  for(i=0; i<oU.length; i++) {
  if(parseInt(newVal.substr(8,1))==oU[i]) {
    if(parseInt(newVal.substring(9))!=2 && parseInt(newVal.substring(9))!=6) {
    return true; } } }
  repeatRemove++; return false; }

Lad mig høre om resultatet.

Mvh. Johan
Avatar billede olebole Juniormester
09. november 2005 - 10:18 #17
<ole>

- men er du så uheldig, at dokumentet kommer i nærheden af en browser, der fejlagtigt kunne finde på at tro, der er tale om et XHTML-dokument - og derfor forsøger at parse det som sådan - vil browseren gå ned med et hult drøn og en XML-fejl  :)

/mvh
</bole>
Avatar billede kratluskeren Nybegynder
09. november 2005 - 10:38 #18
Takker for info :)
Systemet skal dog kun bruges internt i en virksomhed, hvor der i forvejen er et krav om hvilken software man bruger, så det er ikke et problem. Iøvrigt den ny Dreamweaver 8 der har sat den ind - mystisk hvis det ikke er helt kompatibelt endnu.

johan.o: Jeg har desvære ikke fået testet dit sidste forslag endnu. Vender lige tilbage på denne lidt senere.
Avatar billede johan.o Nybegynder
09. november 2005 - 10:42 #19
He he :) hvad sagde jeg :)

Mvh. Johan
Avatar billede kratluskeren Nybegynder
09. november 2005 - 10:43 #20
Ja, så den komme :)
Avatar billede kratluskeren Nybegynder
15. november 2005 - 11:31 #21
Jamen det bliver jo bedre og bedre.
Nedenstående har næsten løst problemet som du skrev:

function restoreVal(eC,fld){
    if (eC==9 || eC==16) return;
    if (eC==8||repeatRemove>0){
        if (newVal.length>repeatRemove){
              newVal=newVal.substring(0,newVal.length-repeatRemove)
        }else{
            newVal="";
        }
    }
    repeatRemove=0;
    fld.value=newVal;
}

Den skifter ikke længere selv når man tab'er frem og tilbage, men den gør det faktisk hvis man forsøger at rette i den modsatte dato.

Kan du også løse det?

Ellers må du smide et svar på ovenstående og høste dine points :)
Avatar billede johan.o Nybegynder
15. november 2005 - 14:52 #22
Kan du ikke beskrive helt præcist hvad du gør, så skal jeg prøve at kigge på det :)

Mvh. Johan
Avatar billede kratluskeren Nybegynder
15. november 2005 - 15:30 #23
Super

Jeg udfylder felterne
Felt 1: [12-11-2005]
Derefter
Felt 2: [16-11-2005]

Så fortryder jeg indtastningen i felt 1 og tab'er op for at rette den. Teksten i feltet markeres automatisk af IE. Det passer mig fint for så skal jeg blot trykke piletast-venstre for at rette teksten. Her går det galt for nu erstattes teksten i felt 1 med teksten fra felt 2.

(benytter jeg Mozilla virker tab iøvrigt slet ikke)

Sætter stor pris på din iver. Det ku være et genialt script hvis det kan komme til at virke perfekt.
Avatar billede johan.o Nybegynder
15. november 2005 - 23:33 #24
Pyha :) den trækker tænder ud..he he

Prøv at skifte flg :

function restoreVal(eC,fld){
    if (eC==9 || eC==16) return;

ud med :

function restoreVal(eC,fld){
    if (eC<48 || eC>57) { newVal=fld.value; repeatRemove=0; if(eC!=8) { return; } }

og skift :

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = getCharCode(e);


ud med :

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = getCharCode(e);
if (charCode==8 || charCode==9 || charCode==37 || charCode==39) { return true; }

og skift :

case 5:
  newVal=fld.value+"-"+String.fromCharCode(charCode);
  break;

ud med :

case 5:
    newVal=fld.value+"-"+String.fromCharCode(charCode);
    if (charCode<50){repeatRemove++;return false;}
    break;

Så skulle vi være på banen :) Tab burde virke i mozilla sammen med højre/venstre piletasterne.

Hvis ikke du kan få det til at virke må du hellere poste HELE den kode du arbejder med i din næste tråd så vi er sikre på vi arbejder med det samme stykke kode :)

Mvh. Johan
Avatar billede johan.o Nybegynder
15. november 2005 - 23:40 #25
Grunden til at bl.a. TAB og piletasterne ikke virkede i Mozilla men virkede fint i IE er at Mozilla 'accepterer' at man 'aflyser' disse tryk, men det vil IE ikke være med til :)

Ændringen til case 5, skyldes at det faktisk var muligt før ændringen at skrive 0 og 1 efter den anden bindestreg. Hvis man skrev f.eks. 12-12- og så trykkede DEL 1 gang kunne man ved tryk på 0 eller 1 starte årstallet med disse værdier.

Mvh. Johan
Avatar billede johan.o Nybegynder
15. november 2005 - 23:55 #26
Uops, checkede lige funktionaliteten i Opera og det var ikke godt, det går faktisk fuldstændigt galt......så jeg har faktisk en anden løsning du kunne prøve hvis du vil. Efter at have kigget på roenvings løsning ville jeg prøve om jeg selv kunne lave den funktionalitet han havde opnået, derfor er resultatet naturligvis meget tæt på hans kode, men der er grundlæggende forskelle som måske gør at det virker lidt bedre.

Script delen :

function oFocus(oObject) {
if(oObject.value=="dd-mm-yyyy") {
  oObject.value=""; }
return true; }

function oBlur(oObject) {
if(oObject.value=="") {
  oObject.value="dd-mm-yyyy"; }
return true; }

function oKeyPress(oObject, oKey) {
switch (oObject.value.length) {
  case 0:
  if(oKey>47 && oKey<52) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  break;
  case 1:
  if(oObject.value.substr(0,1)=="0" && oKey>48 && oKey<58) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  if(oObject.value.substr(0,1)=="3" && oKey>47 && oKey<50) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  if(oObject.value.substr(0,1)!="3" && oObject.value.substr(0,1)!="0" && oKey>47 && oKey<58) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  break;
  case 3:
  if(oKey>47 && oKey<50) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  break;
  case 4:
  if(oKey>47 && oKey<58) {
    if(oObject.value.substr(3,1)=="1") {
    if(oObject.value.substr(0,2)!="31" && oKey>47 && oKey<51) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
    if(oObject.value.substr(0,2)=="31" && oKey>47 && oKey<51 && oKey!=49) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; } }
    else {
    if(oObject.value.substr(0,2)!="30" && oObject.value.substr(0,2)!="31" && oKey!=48) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
    if(oObject.value.substr(0,2)=="30" && oKey!=48 && oKey!=50) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
    if(oObject.value.substr(0,2)=="31" && oKey!=48 && oKey!=50 && oKey!=52 && oKey!=54 && oKey!=57) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; } } }
  break;
  case 6:
  if(oKey>49 && oKey<58) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  break;
  case 7:
  if(oKey>47 && oKey<58) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  break;
  case 8:
  if(oKey>47 && oKey<58) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
  break;
  case 9:
  if(oKey>47 && oKey<58) {
    if(oObject.value.substr(0,2)=="29" && oObject.value.substr(3,2)=="02") {
    if((oKey/2)!=Math.floor(oKey/2)) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; }
    oL = new Array("0","2","4","6","8");
    oU = new Array("1","3","5","7","9");
    for(i=0; i<oL.length; i++) {
      if(oObject.value.substr(8,1)==oL[i]) { if(oKey!=48 && oKey!=52 && oKey!=56) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; } } }
    for(i=0; i<oU.length; i++) {
      if(oObject.value.substr(8,1)==oU[i]) { if(oKey!=50 && oKey!=54) { oObject.value=oObject.value+String.fromCharCode(oKey); return false; } } }
    } else {
    oObject.value=oObject.value+String.fromCharCode(oKey); return false; } }
  break;
  }
return false; }

function oUp(oObject, oKey) {
if(oKey!="8" && oKey!="46") {
  if(oObject.value.length=="2") {
  oObject.value=oObject.value+"-"; } else {
  if(oObject.value.length=="5") {
    oObject.value=oObject.value+"-200"; } } }
return true; }

function oDown(oObject, oKey) {
if(oKey=="46") { event.returnValue=false; return false; }
if(oKey=="8") {
  oObject.value=oObject.value.substr(0, oObject.value.length-1);
  event.returnValue=false; } }

HTML delen (input feltet) :

<input type='text' name='qAct' maxlength='10' value='dd-mm-yyyy' onfocus='oFocus(this);' onblur='oBlur(this);'

onkeydown='return oDown(this, event.which?event.which:event.keyCode);' onkeyup='return oUp(this, event.which?event.which:event.keyCode);'
onkeypress='return oKeyPress(this, event.which?event.which:event.keyCode);'>

Test gerne løs hvis du har tid, jeg har sikkert ikke fundet alle 'bugs' endnu :)

Mvh. Johan
Avatar billede kratluskeren Nybegynder
16. november 2005 - 00:03 #27
spændende jeg kaster mig over det i morgen.
...lidt for træt nu :D
Avatar billede johan.o Nybegynder
16. november 2005 - 00:04 #28
Og så sidder jeg lige og komme til at tænke på (ref. 15-11 23:40) så er det kun på onkeypress eventen at IE ikke vil 'aflyse' bl.a. TAB og piletasterne den kan godt 'kvæle' dem på onkeydown og onkeyup.

Jeg kan også se jeg har brugt event.returnValue=false; sammen med return false; ... hmm det må jeg kigge på i morgen. Godnat.

God fornøjelse :)

Mvh. Johan
Avatar billede johan.o Nybegynder
23. november 2005 - 00:06 #29
Hvordan gik det med det her :) ?

Mvh. Johan
Avatar billede kratluskeren Nybegynder
23. november 2005 - 08:56 #30
Hey chap
Fik sq ikke lige fulgt op på det.

Jeg kaster mig over det i aften og får testet. Tak for din tålmodighed. Jeg lukker den i aften så du kan få dine points anyway :)
Avatar billede johan.o Nybegynder
23. november 2005 - 09:05 #31
Ingen problemer :) - Der er forresten en ting jeg lige skal høre, bruger du PHP funktionen mktime() i forbindelse med dine sider ?

Mvh. Johan
Avatar billede kratluskeren Nybegynder
23. november 2005 - 10:08 #32
Jeg bruger ASP
Avatar billede johan.o Nybegynder
23. november 2005 - 10:20 #33
Okay, ved ikke hvordan dato håndtering fungerer i ASP men i PHP kan funktionen mktime(), som bruges til at konverterer til unixtimestamp ikke opererer med dato'er efter år 2038, så hvis du brugte den ville jeg rette scriptet til således at det ikke ville accepterer datoer efter dette år :)

Mvh. Johan
Avatar billede kratluskeren Nybegynder
23. november 2005 - 10:22 #34
OK, men det er ikke noget problem :)
Avatar billede kratluskeren Nybegynder
06. december 2005 - 10:31 #35
Hejsa.
Ka du ikke lige smide et svar så overfører jeg dine points. Mange tak for tålmodigheden :)

Jeg har desværre ikke rigtig lige fundet tiden til at få kigget mere på denne, så det bliver en anden gang for mit vedkommende.
Avatar billede johan.o Nybegynder
06. december 2005 - 11:32 #36
Naturligvis :)
Avatar billede kratluskeren Nybegynder
06. december 2005 - 11:36 #37
Thanks :)
Avatar billede johan.o Nybegynder
06. december 2005 - 12:11 #38
Tak for points :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester