Button sperren bis Formular ausgefüllt ist
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abschicken
absenden
attribut
beispiel
bemerkenswerte bugs
button
code
element
empfehlen
entscheidenden nachteil
feld
form
formular
funktion
http
inhalt
input
nachtrag
url
wissen
-
Hallo Zusammen,
Leider begrenzt sich mein Wissen bezüglich Javascript enorm, weswegen ich derzeit vor einem kleinem Problem stehe.
Folgende Situation:
Ich habe ein kleines Formular:
5 Textboxen
1 Textarea
3 Select
Nun benötige ich einen Weg den Submit Button solange zu disablen bis alle 9 inputs eine Value enthalten.
Mittels Google habe ich schon rausgefunden das ich eine Funktion brauche die beim onchange Event durchgeführt wird.
Gibt es einen simplen Weg, das alles auf einmal direkt als eine Funktion zu haben, ohne das ich jedesmal in der Funktion stehen habe if(hmm == "")
Liebe Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
marvinkleinmusic schrieb:
Leider begrenzt sich mein Wissen bezüglich Javascript enorm,...
Wow! Dein Wissen muß gewaltig sein, wenn es schon in der Lage ist, sich selbst zu begrenzen.
Spaß beiseite!
Nun benötige ich einen Weg den Submit Button solange zu disablen bis alle 9 inputs eine Value enthalten.
Den Submit-Button kannst Du mittels "disabeled=disabeled"
Mit einer Function überprüfst Du für jedes Feld, ob es den gewünschten Inhalt hat.
Sobald dies der Fall ist, kannst Du den Submit-Button per JS wieder aktivieren.
Ungetestetes Muster:
function FormPruefung() { var allesAusgefuellt = true; if (document.getElementById('DeineElementIDdesErstenFormularfeldes').value == '') { allesAusgefuellt = false; } if (allesAusgefuellt ) { document.getElementById('DeineButtonID').disabled = false; } }
Im Beispiel wird nur ein Feld geprüft. das auf Inhalt prüfende IF wird halt für jedes Feld mit passender ID kopiert. Du kannst natürlich nicht nur darauf prüfen, ob das Feld leer ist, sondern könntest diese Function zu einer kompletten Validierung ausbauen, die auch noch auf gültige Inhalte prüft.
Getrigget wird das Ganze über " onchange='FormPruefung();' " im Form-Tag.
Nachtrag Einen entscheidenden Nachteil hat ein derartiges Verfahren allerdings: Ist Javascript deaktiviert wird man das Formular niemals absenden können.
Deaktiviert man den Button erst mittels Javascript, kann man zwar abschicken, aber es fällt die komplette Prüfung weg. Das Script, das die Formulareingaben verarbeitet, muß also zusätzlich die Eingabewerte prüfen!
Beitrag zuletzt geändert: 13.4.2015 16:37:48 von fatfreddy -
Schnell mal was zusammengebastelt: hier. Ist eventuell nicht die Beste Lösung, aber so bekommst du wenigstens mal einen Eindruck.
Hab das ganze mit jQuery gelöst und wenn eines der Elemente geändert wird, werden auch alle überprüft, falls eines leer ist, bleibt der Button gesperrt, ansonsten freigegeben. Bei den Select Elementen wird auf einen Bestimmten String geprüft, wenn der "Empty" ist, bleibt der Button ebenfalls gesperrt. Verbesserungsbedarf hätte das Script noch im Eventlistener, da ist change vermutlich nicht die geeignete Wahl. Aber für das Beispiel muss es reichen.
Eine alternative wär jedes Element im Code anzugeben und einzeln zu überprüfen. So ists hald bisschen schöner und das HTML kann einfach geändert werden, ohne, dass der Code beeinflusst wird.
fatfreddy schrieb:
Dies habe ich in meinem Script auch noch angepasst. Wenn JavaScript deaktiviert ist, bleibt der Button aktiv. Serverseitig muss das ganze aber sowieso geprüft werden. Clientseitig kann ja vom User alles geändert werden. Zum Beispiel das disabled Attribut entfernen und abschicken, obwohl Felder noch leer sind.
Nachtrag Einen entscheidenden Nachteil hat ein derartiges Verfahren allerdings: Ist Javascript deaktiviert wird man das Formular niemals absenden können.
Deaktiviert man den Button erst mittels Javascript, kann man zwar abschicken, aber es fällt die komplette Prüfung weg. Das Script, das die Formulareingaben verarbeitet, muß also zusätzlich die Eingabewerte prüfen!
EDIT: Kleine Änderung bei den Select Feldern, wenn du es lieber so hättest.
Beitrag zuletzt geändert: 13.4.2015 18:21:11 von c143 -
Warum einfach wenns auch kompliziert geht?
HTML5 bietet hierfür ein "required" Attribut.
Hiermit kommst du sogar in den Genuss von Browsergenerierten Fehlermeldungen:
<form action="..."> Label: <input type="text" name="feldname" required> und auch mit deiner Auswahl: <select name="selection" required> <option selected disabled hidden value=''></option> <option value="0">A</option> <option value="1">B</option> <option value="2">C</option></select> <input type="submit"> </form>
Der Button wird zwar (bei mir) nicht ausgegraut, aber der Benutzer bekommt ggf. sogar eine grafisch ans Betriebsystem angepasste Fehlermeldung.
Wird von allen relevanten Browsern unterstützt: http://caniuse.com/#feat=form-validation -
ich würde dir empfehlen bei deinen inputs das Attribut required mit einzubringen. Die nicht ausgefüllten Felder werden beim versuchten Senden rot werden und die Formularübergabe wird scheitern ;)
Ich würde dir empfehlen trotzdem eine PHP-Sicherung einzubauen, um zu verhindern, dass sich einer um die required hindurchschleicht. also ungefähr so:
<?php if(!isset($_POST['Wert1'])||$_POST['Wert1']=='') {header("Location:formular.html");} ?>
Ich hoffe ich konnte dir bei deinem Problem helfen -
exit nicht vergessen. ;)
Und Location sollte eigentlich absolut sein. -
Erwähnen sollte man noch, dass alleine CSS und HTML für die Formularüberprüfung nicht ausreichend sind
-
Das hatten wir ja schon.
Und ich muss leider sagen, ich hab mich geirrt. Im neuen IETF RFC 7231 steht, das auch relativ in Ordnung ist. -
IE 8,9; iOS Safari 7.1,8.3; Android Browser < 4.4.4; Opera Mini 8
unterstützen das Attribut required nicht einmal. Außerdem kann man POST und GET Anfragen faken, also warum soll das bitteschön sicher sein (ohne PHP Prüfung)?
-
Die von dir genannten Browser betrachte ich nicht als relevant...
Es geht hier nicht um Sicherheit - es geht um Usability!
Der Sinn dahinter ist nur 99% aller falschen Eingaben schon beim User abzufangen - das spart Zeit und sorgt für ein besseres Bediengefühl, wenn ich auf versehentliche Falscheingaben "sofort" und nicht nach einem erneutem Laden der Seite hingewiesen werde.
Von c143 wurde ja auch schon darauf hingewiesen, dass eine serverseitige Überprüfung stattfinden muss.
"Vertrau nie dem User" sollte eh jedem bekannt sein der selbst irgendwas programmiert - es haben schon genug Leute falsch gemacht und für z.T. bemerkenswerte Bugs gesorgt...
edit: "hier" zur Klarstellung unterstrichen
Beitrag zuletzt geändert: 15.4.2015 18:48:03 von ikatools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
