Willkommen in der Webstatt Zum Webstatt Blog und Stories
web4 am 26.09.06 19:29

hii zusammen,

ich möchte ein Formularfeld mit JS überprüfen (das wird auch noch mit php gemacht, aber aus design gründen braucht es die JS-Variante).

Wie kann ich in 1 Formularfeld auf:
- zeichenlänge (darf nicht 1,2,3,4 und <20)
- gewisse Zeichen (" ' ? !)

überprüfen?

Wenn die Eingabe nicht die Vorgaben erfüllen soll ein roter Balken um das Formularfeld gezogen werden...sprich am anfang ist es rot, dann gibt man etwas richtiges ein und der rote balken verschwindet.

gibts für so ähnliches ein gutes Tutorial? oder ein Codeschnipsel? oder wie würdet ihr anfangen?

bin ziemlich übler JS-noob... was aber gerne bereit bin zu ändern =)
danke im voraus
web4

netcup.de Warum gibt es hier Werbung?
milahu milahu am 26.09.06 20:03

Erstmal brauchst du einen sog. "event handler", hier für onchange:
document.getElementById('eingabefeld').onchange = function h() {
// ...
}

Innerhalb dieses Handler kannst du nun ganz einfach mit "this" auf das betroffene Element zugreifen:
if (this.value.length < 4 || 20 < this.value.length || this.value.indexOf("?") != -1) {
this.className = "invalide";
}

Näheres zu Event-Handlern: http://de.selfhtml.org/javascript/sprache/eventhandler.htm
Näheres zu String-Methoden: http://de.selfhtml.org/javascript/objekte/string.htm

Viel Spaß am Gerät :P

sili sili am 26.09.06 20:45

Habe auch etwas kleines probiert. Das funktioniert sogar mehr oder weniger :)

<?xml version="1.0" encoding="iso-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head><title>Seitentitel</title>
<script type="text/javascript">
window.onload = check_input;
function check_input() {
document.getElementsByName('text')[0].onkeydown = function() {
if (this.value.length > 4 && this.value.length < 21) {
this.className = 'ok';
} else {
this.className = 'nok';
}
};
}
</script>
<style type="text/css">
<!--
input.ok { border:1px solid green; }
input.nok { border:1px solid red; }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head><body>

<h1>Input Inhalt direkt bei der Eingabe pr&uuml;fen</h1>
<p><input type="text" name="text" class="nok" id="checkinput" /></p>

</body></html>

nuit nuit am 26.09.06 21:01

kannst du nicht auch regexen? geht das in Js...bin mir gerade nicht sooo sicher *fg*

http://www.webreference.com/js/column5/

sollte doch auch gehen..mit einem Regex oder?

Michael Michael am 26.09.06 21:24

Regex geht mit der Methode .match(regex)
Den Rest des Threads habe ich nur überflogen

web4 am 26.09.06 21:38

vielen dank!

puh JS ist gar nicht soooo einfach =) also zu php gibt es nur spärlich ähnlichkeiten...

was ein "event-handler" ist, ist mir nun klar. wie man die funktion aufruftmacht auch sinn.

jedoch, wenn ich jetzt meine gewonnen Kenntnisse von milahu und das Script von sili nehme und versuche die Bedingung (keine "?") einzubauen, scheitere ich bereits...:)

if (this.value.length > 2 && this.value.length < 21 && this.value.indexOf("?") = -1) {

wobei ich sagen muss, dass ich nicht ganz verstehe, was " = -1" heissen soll...
von der logik macht es doch sinn: nimm wert aus dem textfeld und suche Position von ?... was ist daran falsch?

gruss
web4

//hm regexen mit js... ja wenns auf die jetztige weise methode nicht funktionieren sollte... =) aber bisher gefällt mir die bisherige art und weise ganz gut:)

nuit nuit am 26.09.06 21:45

this.value.indexOf("?") == -1

das -1 gibt indexOf einfach zurück wenn ? nicht vorkommt...du musst aber 2 = setzen ;) ist wie in php *g*

//Du kannst dir auch mal anschauen was die Js Konsole zurückgibt ;) da stehen auch immer brauchbare sachen drin

web4 am 30.09.06 11:58

ok klar.

wenn ich jetzt das gleiche machen möchte, nur nicht nur mit einem formularfeld, sondern mit mehreren müsste das theoretisch so heissen:

document.getElementsByName('text')[0].onkeydown AND document.getElementsByName('text1')[0].onkeydown= function() {

für 2 felder - was aber syntaxtechnisch falsch ist.

wie kann ich ihm jetzt sagen, dass er diese funktion bei mehreren formularfeldern ausführen soll?

gruss und danke!
web4

milahu milahu am 30.09.06 17:43

function f() {}
a.onblubb = f;
b.onblubb = f;

..oder so aehnlich halt ;-)

web4 am 30.09.06 22:59

hmm tut mir leid, aber du musst noch etwas konkretisieren :( habe fast alles ausprobiert, aber nichts funktioniert...

ich nehme an du wolltest sagen: funktion f immer wieder bei jedem formularfeld aufrufen... nur in der funktion f, ist das formularfeld, auf welches das script zugreift schon festgelegt... oder verstehe ich da was falsch?

gruss
web4

Johannes am 30.09.06 23:33

Packt man nicht sonst ein onsubmit="return funktion()" in den <form>-Tag rein, wobei die Funktion false zurückgibt, wenn irgendwelche Bedingungen nicht erfüllt sind?

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt