Werte begrenzen im input-feld

[anonymous_möchtegern]

Hallo, liebe Gemeinde des Javascript,

ich Laie habe eine sicher ziemlich simple Frage.

Ich habe einige input-felder, in denen nur die Eingabe von Zahlen erlaubt sind. Jedoch darf keine Zahl die größer als 255 ist, eingegeben werden. Da soll eine Fehlermeldung aufscheinen.

hier mein Code bisher:

  
if(document.form1.TEXTFELDNAME.value > "255")  
	{  
	alert("only numbers between 0 and 255 are allowed");  
	document.form1.frame.focus();  
	return false;  
	}  

bin ich auf den richtigen Weg oder was muss ich ändern, damit das endlich funktioniert??

Ich bitte um Hilfe und bedanke mich im vorraus

[1UnitedPower]

Meine Herren,

Hallo, liebe Gemeinde des Javascript,

ich Laie habe eine sicher ziemlich simple Frage.

Ich habe einige input-felder, in denen nur die Eingabe von Zahlen erlaubt sind. Jedoch darf keine Zahl die größer als 255 ist, eingegeben werden. Da soll eine Fehlermeldung aufscheinen.
bin ich auf den richtigen Weg oder was muss ich ändern, damit das endlich funktioniert??

Die bist auf dem Holzweg, du kannst auf JavaScript komplett verzichten und das gleiche mit HTML-Boardmitteln erreichen.

Die Variante hat sogar den Vorteil, das Smartphones entsprechende numerische Tastaturen anbieten können.

<input type="number" max="255">

Browserunterstützung ist meh.

Es gibt aber genügend Polyfills, das sind Javascripte, die das Verhalten nachrüsten können.

[Der Martin]

Hi,

Ich habe einige input-felder, in denen nur die Eingabe von Zahlen erlaubt sind. Jedoch darf keine Zahl die größer als 255 ist, eingegeben werden. Da soll eine Fehlermeldung aufscheinen.

dann ist der Hinweis von 1UnitedPower, das mit den "neuen" Mitteln aus HTML 5 zu tun, sicher nicht verkehrt.
Nur falls du auch alte Browser noch unterstützen willst, die das noch nicht kennen, müsstest du mit Javascript nachhelfen. Und da ist dein Ansatz mal gar nicht so falsch, bis auf ...

if (document.form1.TEXTFELDNAME.value > "255")

... diesen Klimmzug. Du sagst, du willst Zahlenwerte eingeben und beschränken. Warum vergleichst du dann Strings? Das führt zu seltsamen Ergebnissen, denn beispielsweise gilt auch "4" > "255", andererseits aber "0500" < "255". Also wenn schon, dann vergleiche bitte Zahlenwerte.

alert("only numbers between 0 and 255 are allowed");

Die Unteregrenze prüfst du übrigens gar nicht ab, also geht beispielsweise -1804 auch ohne Beanstandung durch.

Ich bitte um Hilfe und bedanke mich im vorraus

Kein Grrund, einfach so Konsonanten zu verrdoppeln.

Ciao,
 Martin

[Gast]

ich würde nach jedem Tastendruck den (bisher) eingegebenen Wert auslesen und auf beide Grenzen (min, max) abprüfen.

onkeyup ist dein Freund. So ungefähr (nicht getestet):

unkeyup="pruefe(this.value,0,255)"

function pruefe(val,min,max) {
  if   ( !IsNumeric(val) ) fehler = 1 // 123.456 gueltig, 123,456 ungueltig
  else if (val*1 < min*1 ) fehler = 2 // 123.456 > min
  else if (val*1 > max*1 ) fehler = 3 // 123.456 < max
  else fehler = 0;
  if(fehler) alert ...;
}

Gast

[Gast]

ich würde nach jedem Tastendruck den (bisher) eingegebenen Wert auslesen und auf beide Grenzen (min, max) abprüfen.

Und wichtig: Auch der Server muss den übermittelten Wert prüfen, sonst geht jeder "Dreck" durch, wenn Javascript abgeschaltet ist.

Gast

[Kai345]

[latex]Mae  govannen![/latex]

alert("only numbers between 0 and 255 are allowed");

  
alert ist übrigens eine sehr schlechte Lösung, weil der Focus vom Eingabeelement genommen wird, beispielsweise wenn ich eine Eingabe berichtigen will und dabei temporär einen ungültigen Wert im Eingabefeld stehen habe. Blende ein Element im Dokument ein bzw. aus, wenn der Wert nicht im Bereich ist.  
  
Zur Validierung:  
  
Ein einfacher Weg wäre z.B.  
  
~~~javascript
var val = Number(document.form1.TEXTFELDNAME.value);  
if (isNaN(val) || val < 0 || val > 255) {  
    // Fehlermeldung einblenden  
    return false;  
}

Stur lächeln und winken, Männer!

Kai

[Steffen]

Array(16).join("x" - 1) + " Batman!"

Danke :-)

[anonymous_möchtegern]

Hannon le für die vielen guten Tipps.
Habe das Problem mit Kai345's variante sehr gut lösen können.

DANKESCHÖN :D

[1UnitedPower]

Meine Herren,

Habe das Problem mit Kai345's variante sehr gut lösen können.

Sehr gut? Was wenn der User JS deaktiviert hat? Dann greift nur die serverseitige Validierung, also muss ein zusätzlicher Request an den Server gesendet werden. Mit der HTML5-Variante könnte man in einigen Fällen diesen Affenformular-Zugriff vermeiden. Außerdem muss der Benutzer wissen, dass er einen Punkt als Dezimaltrenner, statt einem Komma, wie im Deutschen üblich, zu verwenden hat. Und nicht zu vergessen, dass Smartphones und Tablets keine optimierte Tastatur bereitstellen können.

[Kai345]

[latex]Mae  govannen![/latex]

Habe das Problem mit Kai345's variante sehr gut lösen können.

Sehr gut? Was wenn der User JS deaktiviert hat? Dann greift nur die serverseitige Validierung, also muss ein zusätzlicher Request an den Server gesendet werden. Mit der HTML5-Variante könnte man in einigen Fällen diesen Affenformular-Zugriff vermeiden. Außerdem muss der Benutzer wissen, dass er einen Punkt als Dezimaltrenner, statt einem Komma, wie im Deutschen üblich, zu verwenden hat.

Na und?
All dies trifft genau so auch zu, wenn der User mit einem Browser unterwegs ist, der kein HTML5 kennt. (IE8 zum Beispiel, den man auf dem immer noch weit verbreiteten Windows XP bekanntlich nicht updaten _kann_) Dann nutzt die HTML5-Lösung alleine genauso wenig wie die Andere bei deaktiviertem Javascript. Auch dann hat man den zusätzlichen Request, die fehldene Unterscheidung . vs , ...

Stur lächeln und winken, Männer!

Kai

[1UnitedPower]

Meine Herren,

[latex]Mae  govannen![/latex]

Habe das Problem mit Kai345's variante sehr gut lösen können.

Sehr gut? Was wenn der User JS deaktiviert hat? Dann greift nur die serverseitige Validierung, also muss ein zusätzlicher Request an den Server gesendet werden. Mit der HTML5-Variante könnte man in einigen Fällen diesen Affenformular-Zugriff vermeiden. Außerdem muss der Benutzer wissen, dass er einen Punkt als Dezimaltrenner, statt einem Komma, wie im Deutschen üblich, zu verwenden hat.

All dies trifft genau so auch zu, wenn der User mit einem Browser unterwegs ist, der kein HTML5 kennt.

Wir sollten schon zwischen den einzelnen Punkten differenzieren.

Eine optimierte Tastatur wirst du mit der puren JS Lösung nicht hinbekommen, das ist ein Vorteil der HTML5 Lösung, der sich nicht von der Hand weisen lässt.

Der Dezimaltrenner ist ebenfalls kein Problem.

Bleibt:

(IE8 zum Beispiel, den man auf dem immer noch weit verbreiteten Windows XP bekanntlich nicht updaten _kann_) Dann nutzt die HTML5-Lösung alleine genauso wenig wie die Andere bei deaktiviertem Javascript.

Für den Fall habe ich deshalb zu Polyfills geraten. Die gibt es für type="number" wie Sand am Meer. Bei mir ist Webshims im Dauereinsatz.

[Kai345]

[latex]Mae  govannen![/latex]

Der Dezimaltrenner ist ebenfalls kein Problem.

Bei nicht HTML5-fähigen Clients dann wieder doch.

Bleibt:

(IE8 zum Beispiel, den man auf dem immer noch weit verbreiteten Windows XP bekanntlich nicht updaten _kann_) Dann nutzt die HTML5-Lösung alleine genauso wenig wie die Andere bei deaktiviertem Javascript.

Für den Fall habe ich deshalb zu Polyfills geraten.

.. die aber in dem von dir beschriebenen Szenario auch nicht weiterhilft, da bei dem Nutzer JS ja ausgeschaltet ist. ;)

Wenn der Nutzer mit einem IE8 mit deaktiviertem JS unterwegs ist (was bei diesem „Browser“ durchaus nicht die schlechteste Idee ist), greift dann weder die HTML5 noch die Polyfill-Validierung. Genau darauf wollte ich hinaus - es wird immer irgendeinen Fall geben, bei dem man nicht verhindern kann, daß man den serverseitigen Request benötigt. Dein o.g. Posting las sich aber schon so, als wären diese Nachteile nur bei der simplen Javascript-Lösung vorhanden.

Außerdem will/kann man auch nicht in jedem Fall ein gegebenenfalls umfangreiches bestehendes Dokument komplett auf HTML5 umschreiben, nur um ein Formular-Feld vorzuvalidieren.

HTML5-Validierung mit Rückfall auf Javascript mit Rückfall auf Servervaliderung ist natürlich die beste Lösung, das ist ohnehin klar (wobei „Javascript“ durchaus auch bedeuten kann, beispielsweise einen XHR-Request an ein serverseitiges Validierungs-Script abzusenden oder aber das entsprechende Javascript serverseitig passend automatisch zu erzeugen, denn je nach Umfang des Projekts möchte man die Validerung nicht doppelt "von Hand" schreiben)

Stur lächeln und winken, Männer!

Kai

[Der Martin]

Hallo,

Wenn der Nutzer mit einem IE8 mit deaktiviertem JS unterwegs ist (was bei diesem „Browser“ durchaus nicht die schlechteste Idee ist), ...

das ist genau der Punkt, der mir auch immer wieder sauer aufstößt: Gerade beim IE wird und wurde doch immer mal wieder empfohlen, Javascript zu deaktivieren (gelegentlich auch von MS), um so die eine oder andere Sicherheitslücke zu umschiffen - "vorläufig", bis das eigentliche Problem behoben ist. Aber bekanntlich ist nichts so dauerhaft wie ein Provisorium. Daher ist der Prozentsatz "Javascript deaktiviert" beim IE vermutlich deutlich höher als bei anderen Browsern.

Und deshalb halte ich den Ansatz, dem IE ausgerechnet mit Javascript zu etwas verhelfen zu wollen, was er "out of the box" nicht kann, für ungeeignet. Wenn ein IE6, IE7 oder IE8 etwas nicht kann (nicht implementiert hat), dann kann er's halt nicht. Punkt.

Ciao,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

Wenn der Nutzer mit einem IE8 mit deaktiviertem JS unterwegs ist (was bei diesem „Browser“ durchaus nicht die schlechteste Idee ist), ...

das ist genau der Punkt, der mir auch immer wieder sauer aufstößt: Gerade beim IE wird und wurde doch immer mal wieder empfohlen, Javascript zu deaktivieren (gelegentlich auch von MS), um so die eine oder andere Sicherheitslücke zu umschiffen - "vorläufig", bis das eigentliche Problem behoben ist. Aber bekanntlich ist nichts so dauerhaft wie ein Provisorium. Daher ist der Prozentsatz "Javascript deaktiviert" beim IE vermutlich deutlich höher als bei anderen Browsern.

Und deshalb halte ich den Ansatz, dem IE ausgerechnet mit Javascript zu etwas verhelfen zu wollen, was er "out of the box" nicht kann, für ungeeignet. Wenn ein IE6, IE7 oder IE8 etwas nicht kann (nicht implementiert hat), dann kann er's halt nicht. Punkt.

Nö, das sehe ich nicht so. Bei der Darstellung von Dokumenten und _insbesondere_ der Bedienbarkeit der Inhalte sollte man all das machen, was ohne allzu großen Aufwand möglich und notwendig ist (beispielsweise dem IE einige der wichtigen HTML5-Elemente zu „erklären“, damit dieser sie zumindest darstellen kann. Spielereien wie CSS3-Candy sind hingegen unnötig.

Auch darauf, Möglichkeiten zu nutzen, die zusätzliche Roundtrips zum und vom Server vermeiden, sollte man meiner Meinung nach nicht verzichten.

Das Wichtigste ist der Nutzer; ihm sollte man möglichst alle Annehmlichkeiten zur Verfügung stellen, die mit vertretbarem(!) Aufwand realisieren kann.

Natürlich fallen dann immer noch diejenigen IE 6|7|8 - Nutzer hinten runter, die Javascript abgeschaltet haben, das ist klar. Deshalb sollte man den (meiner Meinung nach überwiegenden) Nutzern _mit_ Javascript diese Annehmlichkeiten jedoch nicht aus reiner Bequemlichkeit verweigern. Das kann man bedingt bei privaten Sites so halten, da kommt es nicht darauf an. Aber bei gr(o|ö)ße(re)*n Sites halte ich es für falsch.

Natürlich kann man auch alles übertreiben, so wie ich - mein Länder- und Flaggenquiz wird -just for fun- immer noch IE7-tauglich gehalten (und eine manuelle Zahl-Eingabemöglichkeit sogar Martin-tauglich ^^ ), aber *so* verrückt muß man auch wieder nicht sein :D

Stur lächeln und winken, Männer!

Kai

[Der Martin]

Hallo,

Natürlich kann man auch alles übertreiben, so wie ich - mein Länder- und Flaggenquiz wird -just for fun- immer noch IE7-tauglich gehalten (und eine manuelle Zahl-Eingabemöglichkeit sogar Martin-tauglich ^^ ), ...

öhm, müsste ich das verstehen?
Zugegeben, mir ist es am liebsten, wenn ich Zahlen einfach numerisch eingeben kann, anstatt mit irgendwelchen phantasievollen Controls. Aber habe ich mich mal auffällig in der Richtung geäußert?

Dein Flaggen-Quiz habe ich übrigens nie näher angesehen, weil mich solche Online-Spielchen generell nicht so ansprechen.

Ciao,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

Natürlich kann man auch alles übertreiben, so wie ich - mein Länder- und Flaggenquiz wird -just for fun- immer noch IE7-tauglich gehalten (und eine manuelle Zahl-Eingabemöglichkeit sogar Martin-tauglich ^^ ), ...

öhm, müsste ich das verstehen?
Zugegeben, mir ist es am liebsten, wenn ich Zahlen einfach numerisch eingeben kann, anstatt mit irgendwelchen phantasievollen Controls. Aber habe ich mich mal auffällig in der Richtung geäußert?

Ich meine damit, daß ich neben Dezimalzahlen auch Notationen wie 0x2b oder 046 oder 0o62 oder 0b100111 oder XXVII oder 1.1E2 akzeptiere. Wie gesagt: Martin-tauglich :D

Stur lächeln und winken, Männer!

Kai

[Der Martin]

Mahlzeit,

(und eine manuelle Zahl-Eingabemöglichkeit sogar Martin-tauglich ^^ ), ...
öhm, müsste ich das verstehen?
Ich meine damit, daß ich neben Dezimalzahlen auch Notationen wie 0x2b oder 046 oder 0o62 oder 0b100111 oder XXVII oder 1.1E2 akzeptiere. Wie gesagt: Martin-tauglich :D

aaah, das meinst du, ja. Sehr schön!
Alles klar, FF (Ferstehe Follkommen).

Wobei ... extra ein Parser für römische Zahlen?
Das ist schon recht sportlich. :-)

Bye,
 Martin