<input> mit JS überprüfen

[Bones van Helghast]

Hallo.
Ich hab folgendes im Kopf und weiß leider nicht nach was ich Googlen muss...
Ich würde gerne ein Kontaktformular einspaltig machen das heißt es werden nur die <input> und <textarea> sowie der Submit-Button angezeigt.
Startet man die Seite mit dem Formular stehen statt wie in einem 2 spaltigen Formular die dinge wie 'Dein Name' & 'Deine E-Mail Adresse' etc. in dem Input Feld (Das geht ja bereits auch schon)
Beim reinklicken verschwindet der vorgegebene Text, lässt man das Feld leer und wechselt in das nächste Feld kommt der Text wieder wenn ich was reingeschrieben hab' bleibt der von mir reingeschriebene Text aber erhalten (Funktioniert ebenfalls)
So nun möchte ich aber trotzdem dass nach einer Eingabe je nachdem ob etwas hinein geschrieben wurde oder nicht eine rote X-Grafik angezeigt wird also ein kleines bild das ein X ist oder wenn etwas reingeschrieben wurde ein grüner Haken erscheint...
Genau dort liegt mein Problem ich weiß nicht wie ich das umsetzen soll..
Also man kommt in das erste Feld gibt dort etwas ein wechselt in das nächste Feld und in dem Moment soll entweder der grüne Haken oder das Rote X angezeigt werden... Das soll auf mehreren bzw. auf allen Input-Feldern passieren...
Hat jemand zufällig ein solches JavaScript da oder weiß nach was man Googlen müsste?
Wäre um jeden hilfreichen Post dankbar

[Pyramide]

Startet man die Seite mit dem Formular stehen statt wie in einem 2 spaltigen Formular die dinge wie 'Dein Name' & 'Deine E-Mail Adresse' etc. in dem Input Feld (Das geht ja bereits auch schon)
Beim reinklicken verschwindet der vorgegebene Text

Bitte nicht. Aus usability-Sicht ist das einfach nur grauenvoll.

But in general, putting text in the field like this is not usually a good idea.

When users focus in the field, you really have to make the text disappear to avoid confusion. So just when the user is about to type into the field—right at that point when they might care what the label says—they can't see it.

This is even worse if the text in the field is additional prompt text (as in your second example above). In this case the text is only useful when the user is typing in the field.

This might be OK in some circumstances where it's fairly obvious what the field does anyway. For example, I use it in the search box at the top-right of my blog. But it's still not great. When used in a form with multiple fields, I have seen users forget what they are supposed to be typing. The only way to get the label back is to delete the text from the field. Clunky. And very frustrating.

So this is tricky enough even before you consider accessibility. It's best not to do it.

http://uxexchange.com/questions/309/for ... essibility
http://doctype.com/registration-forms-without-labels
http://usabilitythoughts.com/form-labels.html

[Unimatrix_0]

Also man kommt in das erste Feld gibt dort etwas ein wechselt in das nächste Feld und in dem Moment soll entweder der grüne Haken oder das Rote X angezeigt werden... Das soll auf mehreren bzw. auf allen Input-Feldern passieren...
Hat jemand zufällig ein solches JavaScript da oder weiß nach was man Googlen müsste?
Wäre um jeden hilfreichen Post dankbar

Ungeachtet dessen was Pyramide schreibt ist das wonach du suchst entweder eine input validierung per javascript (dafür gibt es schon diverse vorgefertigte Scripte) oder wenn du die Eingaben gegen eine Datenbank o.ä. abgleichen solltest du nach AJAX googlen.

LG Un1

[FCM]

Ich kann hier Pyramide zustimmen, zumindest aus persönlicher Erfahrung empfinde ich so etwas als leicht unangenehm.

Die Validierung kann durch reines JavaScript erfolgen, beispielsweise so:

Code: Alles auswählen

var theValue = document.getElementById('inputID').value;

if (!theValue.match(/^[a-zA-Z0-9]+$/)) {
			
	/*
		In der Eingabe befinden sich außer Ziffern & Buchstaben andere, nicht erlaubte Zeichen
	*/
	alert('Bitte korrigieren Sie Ihre Eingabe.');

}