Webstatt.org - Community seit 2006 - 2012 (2024?)

Formularfeld überprüfen

user-344
26.09.2006 17: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
Avatar user-255
26.09.2006 18:03
Erstmal brauchst du einen sog. "event handler", hier für onchange:
document.getElementById('eingabefeld'zwinkern.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("?"zwinkern != -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 frech
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-300
26.09.2006 18:45
Habe auch etwas kleines probiert. Das funktioniert sogar mehr oder weniger lächeln

<?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'zwinkern[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>
Avatar user-271
26.09.2006 19: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? 
#!/bin/bash
traurig){ neutral:& };:
Avatar user-253
26.09.2006 19:24
Regex geht mit der Methode .match(regex)
Den Rest des Threads habe ich nur überflogen
user-344
26.09.2006 19: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 user-255 und das Script von user-300 nehme und versuche die Bedingung (keine "?"zwinkern einzubauen, scheitere ich bereits...lächeln

if (this.value.length > 2 && this.value.length < 21 && this.value.indexOf("?"zwinkern = -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 gutlächeln
Avatar user-271
26.09.2006 19:45
this.value.indexOf("?"zwinkern == -1

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

//Du kannst dir auch mal anschauen was die Js Konsole zurückgibt zwinkern da stehen auch immer brauchbare sachen drin 
#!/bin/bash
traurig){ neutral:& };:
user-344
30.09.2006 09: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'zwinkern[0].onkeydown AND document.getElementsByName('text1'zwinkern[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
Avatar user-255
30.09.2006 15:43 
function f() {}

a.onblubb = f;

b.onblubb = f;

..oder so aehnlich halt zwinkern
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-344
30.09.2006 20:59
hmm tut mir leid, aber du musst noch etwas konkretisieren traurig 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
user-203
30.09.2006 21: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?
Denkt dran, Kinder auf dem Rücksitz verursachen Unfälle, Unfälle auf dem Rücksitz verursachen Kinder.