Willkommen in der Webstatt
User-1 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
xyz-234

netcup.de Warum gibt es hier Werbung?
User-2 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

User-3 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>

User-4 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?

User-5 am 26.09.06 21:24

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

User-1 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 xyz-145 und das Script von xyz-190 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
xyz-234

//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:)

User-4 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

User-1 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!
xyz-234

User-2 am 30.09.06 17:43

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

..oder so aehnlich halt ;-)

User-1 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
xyz-234

User-6 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