webForumDet fria alternativet
Logga in

onChange -> validate

21 svar · 429 visningar · startad av ironhead

ironheadMedlem sedan mars 20011 346 inlägg
#1

har 3 st inputrutor...

<INPUT TYPE="text" name=pub_year VALUE="" size="4" maxlength="4">
<INPUT TYPE="text" name=pub_month VALUE="" size="2" maxlength="2">
<INPUT TYPE="text" name=pub_day VALUE="" size="2" maxlength="2">

...nu skulle jag vilja validera att år, mån & dag är i rätt format (ex: 2003-04-24)....så när man flyttar sig från tex månads-rutan, så kollar den att månaderna är emellan 1-12 och att det är siffror..ska man använda onChange då? och hur flyttar man värdet i input-rutan till funktionen....

TEST:
<script language="JavaScript" type="text/javascript">
function chkMonth(pub_month){
if (isInteger (pub_month))
{
if ((pub_month < 1) || (pub_month > 12))
{
document.write ("Fel");
}
}
}
</script>

<INPUT TYPE="text" name=pub_month VALUE="" size="2" maxlength="2" onChange="chkMonth(this);">

Rätt eller fel?!

ironheadMedlem sedan mars 20011 346 inlägg
#2

Har gjort såhär nu:

function chkMonth(){

if ((document.dat.pub_month.value < 1) || (document.dat.pub_month.value > 12)) {
alert("Du måste fylla i en giltig månad (01-12).");
return false;
}

if (document.dat.pub_month.value.length < 2){
alert("Du måste ange minst 2 siffror (ex.02 för Februari)");
return false;
}

if (isInteger (document.dat.pub_month.value)){
}else{
alert("Endast siffror får anges.");
return false;
}

}

...för månad....

och i input:

<INPUT TYPE="text" name=pub_month VALUE="" size="2" maxlength="2" onChange="chkMonth();">

..men om jag skriver samma siffra iegn, då accepterar den det...tex: om jag skriver 1 istf 01 får jag först en varning...andra gången accepterar den det eftersom jag har "onChange"...vad kan man använda för annat för att den ska kolla varje gång...typ "LostFocus" eller nåt sånt?!

Peter SMedlem sedan dec. 20025 483 inlägg
#3
<script type="text/javascript">
<!--

function validate(o){
	var n=o.name,v=o.value;
	switch(true){
		case n.indexOf("year")!=-1:
			var y=new Date().getYear();
			y=(y<1000)?y+1900:y;
			if(isNaN(v)||v.length!=4||parseInt(v)>y)
				alert("Felaktigt år");
		break;

		case n.indexOf("month")!=-1:
			if(isNaN(v)||parseInt(v)<1||parseInt(v)>12)
				alert("Felaktig månad");
		break;

		case n.indexOf("day")!=-1:
			if(isNaN(v)||parseInt(v)<1||parseInt(v)>31)
				alert("Felaktig dag");
		break;
	}
};

//-->
</script>

...

<INPUT TYPE="text" name=pub_year VALUE="" size="4" maxlength="4" onblur="validate(this)">
<INPUT TYPE="text" name=pub_month VALUE="" size="2" maxlength="2" onblur="validate(this)">
<INPUT TYPE="text" name=pub_day VALUE="" size="2" maxlength="2" onblur="validate(this)">

Det blir dock ganska irriterande med dessa varningsfönster ;) Dessutom är inte koden optimal eftersom användaren tillåts ange t.ex. 2003 | 02 | 31, vilket inte är ett korrekt datum.

:)

ironheadMedlem sedan mars 20011 346 inlägg
#4

...men nu kan man ju skriva 1 på månad, men jag vill att det ska behövas 2 siffror....ex: 02 för Februari...

Peter SMedlem sedan dec. 20025 483 inlägg
#5

Då lägger vi till en sak:

...
if(isNaN(v)||v.length!=2||parseInt(v)<1||parseInt(v)>12)
	alert("Felaktig månad");
...

:)

ironheadMedlem sedan mars 20011 346 inlägg
#6

åh! tackar!

Dessutom är inte koden optimal eftersom användaren tillåts ange t.ex. 2003 | 02 | 31, vilket inte är ett korrekt datum.

...om man skulle vilja lägga in en koll på att det bara går att köra tex. 28 dagar i Februari-månad.....blir det besvärligt då?

Peter SMedlem sedan dec. 20025 483 inlägg
#7

Det beror på hur "noga" man vill vara. Tänk på att det var fjärde år är 29 dagar i februari ;)

:)

ironheadMedlem sedan mars 20011 346 inlägg
#8

*urk!* :(

Peter SMedlem sedan dec. 20025 483 inlägg
#9

Om du nu bestämmer dig för att göra ett sådant skript kan du använda dig av följande funktion för att kontrollera huruvida ett år är skottår eller ej:

function isLeapYear(n){
     return (n%4==0)&&(n%100!=0)||(n%400==0);
};

alert(isLeapYear(1896)); // Ger [i]true[/i] eftersom år 1896 var ett skottår

alert(isLeapYear(2002)); // Ger [i]false[/i] eftersom år 2002 ej var ett skottår

:)

ironheadMedlem sedan mars 20011 346 inlägg
#10

hittade detta här i forumet

		// hålla koll på skott-år
		if ((faltvardeAr % 4 == 0) \|\| (faltvardeAr % 100 == 0) \|\| (faltvardeAr % 400 == 0))
		{
			var skottar = 1;
		}
		
		// kollar så att man inte skriver in fel dag
		if (faltvardeDag \< 1)
		{
			err = "Månaden kan inte ha mindre än en dag";
		}
		// februari koll om det är skott-år
		if ((faltvardeManad == 2) && (skottar == 1) && (faltvardeDag \> 29))
		{
			err = "Det är skottår, d.v.s månaden har inte mer än 29 dagar";
		} 
		// februari koll om det INTE är skott-år
		if ((faltvardeManad == 2) && (skottar != 1) && (faltvardeDag \> 28))
		{
			err = "Det är inte skott år, d.v.s. månaden kan inte ha mer än 28 dagar";
		}
		// kollar de andra månaderna (31-dagars månaderna)
		if ((faltvardeDag \> 31) && ((faltvardeManad == "01") \|\| (faltvardeManad == "03") \|\| (faltvardeManad == "05") \|\| (faltvardeManad == "07") \|\| (faltvardeManad == "08") \|\| (faltvardeManad == "10") \|\| (faltvardeManad == "12")))
		{
			err = "Månaden har inte mer än 31 dagar";
		}
		// kollar de andra månaderna (30-dagars månaderna)
		if ((faltvardeDag \> 30) && ((faltvardeManad == "04") \|\| (faltvardeManad == "06") \|\| (faltvardeManad == "09") \|\| (faltvardeManad == "11")))
		{
			err = "Månaden har inte mer än 30 dagar";
		}
	}

.....hur ska man "konvertera" detta så att det passa Peters kod?

Peter SMedlem sedan dec. 20025 483 inlägg
#11

Tills vidare:

function validate(o){
	var
		n=o.name,
		v=o.value,
		d=new Date(),
		ms=[31,(isLeapYear(d.getFullYear())?29:28),31,30,31,30,31,31,30,31,30,31];
	switch(true){
		case n.indexOf("year")!=-1:
			if(isNaN(v)||v.length!=4)
				alert("Felaktigt år");
		break;

		case n.indexOf("month")!=-1:
			if(isNaN(v)||v.length!=2||v<1||v>12)
				alert("Felaktig månad");
		break;

		case n.indexOf("day")!=-1:
			var te=document.forms["f"].elements["pub_month"].value;
			if(!isNaN(te))
				var m=ms[te-1];
			if(isNaN(v)||v<1||v>m)
				alert("Felaktig dag");
		break;
	}
	function isLeapYear(n){
		return (n%4==0)&&(n%100!=0)||(n%400==0);
	}
};

...

<form name="f">
	<INPUT TYPE="text" name=pub_year VALUE="" size="4" maxlength="4" onblur="validate(this)">
	<INPUT TYPE="text" name=pub_month VALUE="" size="2" maxlength="2" onblur="validate(this)">
	<INPUT TYPE="text" name=pub_day VALUE="" size="2" maxlength="2" onblur="validate(this)"> 
</form>

:)

ironheadMedlem sedan mars 20011 346 inlägg
#12

Tack så mycket...verkar fungera!
Ska testa mera...

ironheadMedlem sedan mars 20011 346 inlägg
#13

...jag har lagt till ytterligare 3 input rutor i formuläret....hur gör man då?

<form action="sida.asp" name="f" method="post">
<INPUT TYPE="text" name=pub_year size="4" maxlength="4" onblur="validate(this)">
<INPUT TYPE="text" name=pub_month size="2" maxlength="2" onblur="validate(this)">
<INPUT TYPE="text" name=pub_day size="2" maxlength="2" onblur="validate(this)">
<INPUT TYPE="text" name=end_year size="4" maxlength="4" onblur="validate(this)">
<INPUT TYPE="text" name=end_month size="2" maxlength="2" onblur="validate(this)">
<INPUT TYPE="text" name=end_day size="2" maxlength="2" onblur="validate(this)">
<INPUT TYPE="submit" VALUE="Spara">
</form>

Peter SMedlem sedan dec. 20025 483 inlägg
#14

Vad är det för kriterier som skall gälla för samtliga "input"-element?

Det första datumet får inte vara större än dagens datum och det andra datumet för inte vara mindre än dagens datum?

:)

ironheadMedlem sedan mars 20011 346 inlägg
#15

inte nödvändigtvis...skulle bara vilja få det att fungera så att man:

* måste skriva siffror
* måste ha 4 siffror i årtal
* måste ha 2 siffror för månad & dag
* inte kan skriva in fler dagar än det är den månaden och att skottår skall inkluderas

...om det inte blir för struligt med publikationsdatum som inte får vara större än stoppdatum, så välkomnas det med öppna armar, för mina kunskaper om javascript har tagit slut för länge sedan ;)

Peter SMedlem sedan dec. 20025 483 inlägg
#16

Har inte hunnit testa det så mycket men någonting sådant här kanske ( fälten valideras då formuläret skickas istället ):

function validate(o){
	var
		elm=o.elements,
		l=elm.length-1,
		m=[31,0,31,30,31,30,31,31,30,31,30,31],
		d1=null,
		d2=null;

	for(var i=0; i < l; i++){
		var e=elm[i];

		if(e.name.indexOf("year")!=-1){
			if(isNaN(e.value)||e.value.length!=4){
				alert("Felaktigt årtal");
				e.focus();
				return false;
			}
		}
		if(e.name.indexOf("month")!=-1){
			if(isNaN(e.value)||e.value.length!=2||e.value<1||e.value>12){
				alert("Felaktig månad");
				e.focus();
				return false;
			}
		}
		if(e.name.indexOf("day")!=-1){
			m[1]=isLeapYear(o[i-2].value)?29:28;

			if(isNaN(e.value)||e.value.length!=2||e.value<1||e.value>m[o[i-1].value-1]){
				alert("Felaktig dag");
				e.focus();
				return false;
			}
		}
	}

	if(new Date(o.elements[0].value+"/"+o.elements[1].value+"/"+o.elements[2].value) > new Date(o.elements[3].value+"/"+o.elements[4].value+"/"+o.elements[5].value)){
		alert("Publikationsdatumet får ej vara större än stoppdatumet");
		return false;
	}

	function isLeapYear(n){
		return (n%4==0&&n%100!=0)||(n%400==0);
	}
};

...

<form action="sida.asp" name="f" method="post" onsubmit="return validate(this)">
<INPUT TYPE="text" name=pub_year size="4" maxlength="4">
<INPUT TYPE="text" name=pub_month size="2" maxlength="2">
<INPUT TYPE="text" name=pub_day size="2" maxlength="2">
<INPUT TYPE="text" name=end_year size="4" maxlength="4">
<INPUT TYPE="text" name=end_month size="2" maxlength="2">
<INPUT TYPE="text" name=end_day size="2" maxlength="2">
<INPUT TYPE="submit" VALUE="Spara">
</form>

:)

ironheadMedlem sedan mars 20011 346 inlägg
#17

Får problem med denna rad:

l=elm.length-1,

felmess:
length is not an object

Peter SMedlem sedan dec. 20025 483 inlägg
#18

Prova att ändra den raden till:

l=o.elements.length-1,

:)

ironheadMedlem sedan mars 20011 346 inlägg
#19

eh! sorry, det va mitt fel...glömde ta bort javascriptet i input... :r

Nu när jag postar formuläret köper den att start-datum kan vara flera år mer än slutdatum...

Peter SMedlem sedan dec. 20025 483 inlägg
#20

Det verkar konstigt. De första tre "input"-fälten är ju startdatumet och de sista tre fälten stoppdatumet. Skriver du då, t.ex. följande så bör skriptet säga ifrån:

"2002" "10" "31" - "1998" "10" "10"

Jag har dock gjort en liten ändring:

<script type="text/javascript">
<!--

function validate(o){
	var
		elm=o.elements,
		l=elm.length-1,
		m=[31,0,31,30,31,30,31,31,30,31,30,31],
		d1=null,
		d2=null;

	for(var i=0; i < l; i++){
		var e=elm[i];

		if(e.name.indexOf("year")!=-1){
			if(isNaN(e.value)||e.value.length!=4){
				alert("Felaktigt årtal");
				e.focus();
				return false;
			}
		}
		if(e.name.indexOf("month")!=-1){
			if(isNaN(e.value)||e.value.length!=2||e.value<1||e.value>12){
				alert("Felaktig månad");
				e.focus();
				return false;
			}
		}
		if(e.name.indexOf("day")!=-1){
			m[1]=isLeapYear(o[i-2].value)?29:28;

			if(isNaN(e.value)||e.value.length!=2||e.value<1||e.value>m[o[i-1].value-1]){
				alert("Felaktig dag");
				e.focus();
				return false;
			}
		}
	}

	if(new Date(o.elements[0].value+"/"+o.elements[1].value+"/"+o.elements[2].value).valueOf() > new Date(o.elements[3].value+"/"+o.elements[4].value+"/"+o.elements[5].value).valueOf()){
		alert("Publikationsdatumet får ej vara större än stoppdatumet");
		return false;
	}

	function isLeapYear(n){
		return (n%4==0&&n%100!=0)||(n%400==0);
	}
};

//-->
</script>

:)

140 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)