HTML - Checkboxen überprüfen

xBloodbath · 6. Juli 2012

Guten Tag

Ich bin gerade an einer Homepage dran. Es sollte ein Formular werden aus 3 Teilen, beim ersten Teil kann man die Unterordnung wählen, um was es gehen soll.

Dort habe ich 4 Checkboxen. Nun möchte ich machen, dass wenn man den Absenden/Überprüfen Button klickt, es weiter geht ABER nur wenn mindestens eine Checkbox angeklickt wurde.

Falls keine Checkbox angeklickt wurde möchte ich, dass oben ein roter Text (Error Message) kommt, wie z.B "sie müssen zuerst eine Checkbox auswählen"

Wäre dies machbar?
Bitte nur HTML codes hinschreiben :-)

bis jetzt siehts so aus:

HTML:

<html>
<body>
<form action="form.html">
  <p>Kreuzen Sie das gew&uuml;nschte Thema an:</p>
<p>



<form name = "thema" method = "post"> 
	<input type = "checkbox" name="thema" />&nbsp;&nbsp;Telesysteme<br />
                <input type = "checkbox" name="thema" value="2"/>&nbsp;&nbsp;Videosysteme<br />
                <input type = "checkbox" name="thema" value="3"/>&nbsp;&nbsp;Patientenrufsysteme<br />
                <input type = "checkbox" name="thema" value="4"/>&nbsp;&nbsp;Anderes Thema<br /> <p>

                <input type="submit" name="button" value="Überprüfen"/><br>
</form>


<p>
</body>
</html>

vielen dank :-)

chris2603 · 6. Juli 2012

Wie soll man nur HTML-Code schreiben, wenn man dafür JavaScript braucht ?

Google mal "HTML Formular Validieren" das sollte dir helfen.

BZW. dann kommst du zu Beispiel auf folgenden Link

Gibt aber auch genug Frameworks die das können und dir sehr erleichtern.

xBloodbath · 6. Juli 2012

chris2603
geht es nur in JavaScript?

hmm..

Dann eben den JavaScript code in das HTML einbauen :-)

Teufelxx666xx · 6. Juli 2012

blödsinn! es geht ohne java gib mir paar minuten, bin gerade auf arbeit und muss fix einen quellcode fetig stellen

fel1x. · 6. Juli 2012

Hallo,

die Überprüfung lässt sich über zwei Wege lösen.

Javascript
Man könnte per JavaScript die Dokumenteingaben überprüfen. Nachteil wäre, dass man Javascript im Browser deaktivieren lassen kann und das Formular daher ungeprüft durchgereicht wird. Vorteil ist, dass Du auf den Server keine weiteren Dienste/Resourcen benötigst.
PHP
PHP wird im Gegensatz zu JavaScript auf dem Server ausgeführt, so dass der Nutzer die Überprüfung nicht übergehen kann (z. B. durch deaktivieren von JS). Übergehen könnte er sie nur, wenn der Nutzer Lücken im Quellcode findet, die er ausnutzen könnte. Vorteil ist die serverseitige Auswertung (Nutzer kann diese nicht/kaum umgehen), "Nachteil" ist ein Webserver mit dem Dienst PHP.

Die dritte Lösung, ein "Mix" aus beidem, wäre AJAX

Alisee84 · 6. Juli 2012

Mit Javascript:
Den Checkboxen müsstest du glaube ich unterschiedliche Namen geben und dann einfach:

If (thema.thema1.checked == true){
//mache irgendwas
}
else{
//mache was anderes
}

Das ist ejtzt nur ein ungefähres Beispiel, bin mir nicht ganz sicher.

chris2603 · 6. Juli 2012

@Teufelxx666xx

das will ich sehen wie du das nur mit HTML löst

Daaron · 6. Juli 2012

Möglich: Ja.
Zuverlässig: Definitives NEIN!

HTML5 bietet z.B. zwar ein tolles Validierungs-System für Formulare, irgend ein Volltrottel hat aber ausgerechnet die Checkboxes total hirnbefreit implementiert. Es gibt nur "diese Box ist Pflicht", kein "eine Box dieser Gruppe ist Pflicht". Aber selbst wenn... Selbst der IE9 kann nicht mit den HTML5-Validierungen umgehen, darauf könntest du dich nicht verlassen. Das gibts nur für die coolen Kids...

JavaScript ist hier auch eine Herangehensweise, z.B. Mootools Form.Validation. Aber auch das kannste vergessen. Du kannst nicht davon ausgehen, dass deine User JS aktiv haben. Sie könnten z.B. solche Sicherheitsfanatiker sein, die sich nur mit aktivem NoScript ins Netz wagen.

Teufelxx666xx · 6. Juli 2012

? was soll den da validiert werden, er will nur das man nicht mehrer heckboxen auswählen kann.es soll kein pw oder ähnliches abgefragt werden. keine ahnung was ihr alle lest. und das ausgewählte soll einfach nur per maito übertragen werden, keine überprüfungsroutine

Daaron · 6. Juli 2012

Die Aufgabenstellung lautet:
Zeige das Folge-Formular in Abhängigkeit der gewählten Checkbox. Wenn keine Checkbox gewählt wurde, zeige UMGEHEND einen Fehler (ohne serverseitig zu validieren). Auch eine Überprüfung "checkbox.checked?weiter():fehlschlag();" ist eine Validierung.

Und genau das ist unmöglich, auch in HTML5

Prototypp · 6. Juli 2012

Daaron schrieb:
Die Aufgabenstellung lautet:
Zeige das Folge-Formular in Abhängigkeit der gewählten Checkbox. Wenn keine Checkbox gewählt wurde, zeige UMGEHEND einen Fehler (ohne serverseitig zu validieren). Auch eine Überprüfung "checkbox.checked?weiter():fehlschlag();" ist eine Validierung.

Und genau das ist unmöglich, auch in HTML5

Genau so ist es. In diesem Fall wird er nicht drum rum kommen JS zu nutzen. Oder er schickt die Daten an den Server, validiert dort und passt die Ausgabe entsprechend an.....

Choceur · 6. Juli 2012

JS Validierung macht wenig Sinn. JS im Browser abstellen und dann? Wenn du vernünftig validieren willst, kommst du an einer serverseitigen Validierung nicht vorbei (z.B. PHP).

Prototypp · 6. Juli 2012

Er kann ja beide Varianten abdecken

chris2603 · 6. Juli 2012

@Choceur

Normalerweise Validiert man aber bevor man daten durch Internet schickt!
Hat sowohl den Vorteil, dass man weniger Traffic verursacht als auch dass man die Sicherheit damit erhöhen kann.

Das JS ausgehebelt werden kann ist dabei eher zweitrangig.

Warum ?

Weil man nicht davon ausgeht, dass jeder USER erstmal versucht Formulare zu manipulieren, sondern man dem User ein Höchstmaß an komfort bietet.

Selbstverständlich gehört zu jeder clientseitigen validierung (JavaScript) auch eine serverseitige validierung(PHP).

Daaron · 6. Juli 2012

Es sagt ja keiner, dass man nicht soweit es möglich ist mit JS und/oder HTML5 vorsortieren sollte, man MUSS aber serverseitig nachfiltern.
Mit Sachen wie Mootools Form.Validator.Inline ist es echt ein Kinderspiel, mal eben was zu validieren.

xBloodbath · 6. Juli 2012

Nein, ich meine Java Script codes ins HTML Dokument eingeben, beim Formular gings auch, möchte einfach das ein Fenster kommt, wenn nichts angeklickt wurde. Dies sollte 100%-ig gehen, habe es vor einem halben Jahr auch schon fertig gebracht, jetzt komme ich einfach nicht weiter

jemand eine Idee mit JS oder onklick="" ??

Daaron · 6. Juli 2012

Du kannst entweder das Rad neu erfinden und deinen eigenen Validator schreiben, oder du bindest einfach eines der großen JS-Frameworks wie Mootools oder jQuery ein und nutzt deren Validatoren... Da musst du dich schon selbst entscheiden.

xBloodbath · 6. Juli 2012

Daaron
übertreiben wir es mal nicht.

Habe es geschafft, mit check formel im javascript auf den verweis von den 4 checkboxen name=""

Daaron · 6. Juli 2012

Is ja oftmals nicht damit getan, dass man bloß guckt, ob eine der Boxen gesetzt ist. Man muss ja auch noch ne Reaktion auslösen, sei es ein Dialog-Fenster oder einfach nur n Error-Text unter den Boxen. Das wird gern mal etwas länger. Natürlich wird es nie so lang, wie wenn man ein komplettes Framework einbindet, aber andererseits kann man das Framework eh für allen möglichen anderen Mist mitverwenden.

HTML - Checkboxen überprüfen

Cadet 4th Year

Lieutenant

Cadet 4th Year

Lt. Junior Grade

Lt. Commander

Lieutenant

Lieutenant

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Ensign

Lt. Junior Grade

Lieutenant

Fleet Admiral

Cadet 4th Year

Fleet Admiral

Cadet 4th Year

Fleet Admiral

Ähnliche Themen