javascript - endast siffror vid inmatning i formulär

2004-10-06 22:43

#1

ivar
Medlem ●
Stockholm
2004-10-06 22:43

Har för mig att jag besökt webbsidor som har kontrollerat indata till formulär redan vid inmatning.

Vad jag är ute efter är att begränsa inmatningen till ett särskilt formulärfält till att endast få innehålla siffror. Men för att krångla till det ytterligare så ska fältet även få innehålla ett icke-obligatoriskt kommatecken. Det rör sig alltså om ett belopps-fält.

Alternativet är förstås att validera fältet först efter att användaren skrivit in , tex 99,90kr (där 'kr' inte är godkänt).

Anmäl Ändra Gilla Svara

2004-10-07 09:24

#2

Gäst
Oregistrerad ●
2004-10-07 09:24

Fånga onChange på input och sedan validera innehållet.

Anmäl Ändra Gilla Svara

2004-10-08 18:27

#3

Wire
Medlem ●
International user
2004-10-08 18:27

Här har du en html-sida som kollar att endast siffror (0-9) matas in. Detta exempel använder funktionen 'split'. Man kan även anväönda 'isNaN'. Testa sian så ser du:

<html>
<head>
<title>js test</title>
<script language="javascript">

function endast_nummer(){

// inte tomt
if (document.testform.nummer.value == '')
{
	alert('ange ett nummer, tack.');
	return false;
}

// endast tecken i regexet nedan (bara tecken 0-9). 
valuearray = document.testform.nummer.value.split('');

for (var i=0; i < valuearray.length; i++)
{
	if (valuearray[i].search(/[0-9]/) == -1)
	{
	alert('endast tecken 0-9, tack.');
	return false;
	}
}
alert('testet passerat!');
return false; //  Här ska man naturligtvis i skarpt läge ha 'return true', för att skicka formuläret.

}
</script>

</head>
<body>

<form action="what_ever_action.cgi" name="testform" method="post" onsubmit="return endast_nummer();">
<input type="text" name="nummer" value="">
<input type="submit" value="kolla">
</form>

</body>
</html>

Senast redigerat 2004-10-08 20:07

Anmäl Ändra Gilla Svara

2004-10-08 22:05

#4

ivar
Medlem ●
Stockholm
2004-10-08 22:05

Tack för svaren!
onChange, ska kolla närmare på det.. Wire, din metod tillåter att användarn skriver in siffror i fältet men att först vid sumbit så kontrolleras att det bara är siffror.
Jag vill ha så redan när användaren trycker på tangenten så fungerar bara siffror.
Ska som sagt kolla mer på onChange för jag anar att det är fullträff

Anmäl Ändra Gilla Svara

2004-10-08 23:38

#5

Wire
Medlem ●
International user
2004-10-08 23:38

OK, modifierat ser det ut så här. Observera att 'OnChange' inte fungerar med '<input type="text">'. Använd 'OnKeyUp':

<html>
<head>
<title>js test</title>
<script language="javascript">

function endast_nummer(){

// inte tomt
if (document.testform.nummer.value == '')
{
	alert('ange ett nummer, tack.');
	return false;
}

// endast tecken i regexet nedan (bara tecken 0-9). 
valuearray = document.testform.nummer.value.split('');

for (var i=0; i < valuearray.length; i++)
{
	if (valuearray[i].search(/[0-9]/) == -1)
	{
	alert('endast tecken 0-9, tack.');
	document.testform.nummer.value='';
	return false;
	}
}
//alert('testet passerat!');
return false; //  Här ska man naturligtvis i skarpt läge ha 'return true', för att skicka formuläret.

}
</script>

</head>
<body>

<form action="what_ever_action.cgi" name="testform" method="post" onsubmit="return endast_nummer();">
<input type="text" name="nummer" value="" onkeyup="endast_nummer()">
<input type="submit" value="kolla">
</form>

</body>
</html>

Anmäl Ändra Gilla Svara

2004-10-09 11:42

#6

ivar
Medlem ●
Stockholm
2004-10-09 11:42

Man tackar!
Får nästan till det beteendet jag söker.
Är inte helt vass på regexp... försöker skriva till ett som säger
först en siffra(1-9), sen valfritt antal siffror(0-9), sen finns möjligheten att ange ',' eller '.' men då följt av minst 1 och högst 2 siffror (0-9).

Försökte något i stil med
[1-9]{1}[0-9]+[,.]{1}[0-9]{2} men det gick inte någe vidare

Så här ser det ut just nu
(redigerat tillbaka regexpet till i sort sätt omodifierat)

<?php
if(!empty($_POST)) {
	echo '<pre>';
	print_r($_POST);
	echo '</pre>';
}
?>

<html>
<head>
<title>js test</title>
<script language="javascript">
function ejtomt(){
	if (document.testform.nummer.value == '') {
		alert('Ett belopp måste anges. Exempel: 3500,50 eller 3500.50');
		return false;
	}
}
function endast_nummer(){
/*
	// inte tomt
	if (document.testform.nummer.value == '') {
		alert('Ett belopp måste anges. Exempel: 3500,50 eller 3500.50');
		return false;
	}
*/	
	// endast tecken i regexet nedan (bara tecken 0-9). 
	valuearray = document.testform.nummer.value.split('');

	for (var i=0; i < valuearray.length; i++) {
		if (valuearray[i].search(/[0-9,.]/) == -1) {
			alert('Skriv endast beloppet. Exempel: 3500,50 eller 3500.50');
			document.testform.nummer.value='';
			return false;
		}
	}
	//alert('testet passerat!');
	return true;
}
</script>

</head>
<body>

<form action="<?php $_SERVER['PHP_SELF']; ?>" name="testform" method="post" onsubmit="return ejtomt();">
<input type="text" name="nummer" value="" onkeyup="return endast_nummer();">
<input type="submit" value="kolla">
</form>

</html>
</body>

Anmäl Ändra Gilla Svara

javascript - endast siffror vid inmatning i formulär

Senaste nytt