Bootstrap Frameset (Bootstrapvalidator)

html.de-Forum JavaScript
1

Hallo ihr,

ich muss sehr viele Formulare in meinem neuen Projekt erstellen daher möchte ich mir ein „Frameset“ machen also sprich den Code für ein Inputfelder: Datum, Zeit, Titel, Ort… Auslagern.

Ich speichere mir die Codefragmente in include-dateien und rufe die dann auf, soweit ja alles kein Problem.
Jetzt mein Problem ich hänge den Javascript-Code direkt an jedes Input Element, doch das Plugin Bootstrapvalidator lässt sich scheinbar nur einmal pro Formular aufrufen.

Mal ein Beispiel:

[code]





[/code]

So sehen die Code-Fragmente aus beim Datum wird die Validierung noch durchgeführt, beim nachfolgendem Fragment Zeit (das vom Code gleich ist außer dem callback natürlich) passiert nichts mehr. Also wird der Zweite aufruf von Bootstrapvalidator ignoriert.
Ich habe mir auch schon Überlegt für die fields vom Validator einen PHP array zu erstellen und den über die include-dateien zu füllen aber ich bin mir sicher das geht wesentlich einfacher…

Bitte Helft mir :slight_smile:

2

Das ist von der Fragestellung her unverständlich. Auf welche Weise inkludierst du denn die Formulare: php include(), AJAX Request, oder anders?

Der Validator wird auf '#‚formular‘ aufgerufen und überpürpft auch nur ein Feld.

3

Ich habe sie in der Formularseite per require_once eingebunden also Serverseitig.
Ich habe ja für jedes Feld einen extra Aufruf zum Validieren.
Hier mal der link: http://feuerwehr.ebelmxi.de

4

Okay, jetzt mal davon abgesehen, dass es nicht unbedingt userfreundlich ist, für jede Unterseite ein Login zu schreiben:

Die clientseitige Validierung sollte die Input-Felder prüfen, bevor das Formular abgesendet wird. Du hast zwei Felder vom Typ Text. Auf was willst du die prüfen?

5

Warum für jede Unterseite einen login es wird nur auf jeder Seite die Gültigkeit der Session geprüft.
Und was ich vergessen hatte die logindaten sind Benutzer und Passwort: entwicklung

Auf bestimmte Länge des string…

6

Dann brauchst du doch dieses Plugin überhaupt nicht. Eine Überprüfung könnte etwa so aussehen:

ungetestet:

$('input').on('submit', function() { if ($(this).val().length < 4) { return false; } });

7

Schön an diesem plugin ist das Look and Feel der input Felder. Und eben die live Validierung…
Wenn du in das Datumsfeld manuell eingibst siehst du es.

8

Die Live-Validierung ist ein on(‚blur‘) und lässt sich auch über das required Attribute von HTML5 und/oder die error-classes von Bootstrap erreichen.

Wenn du mal etwas tiefer eingestiegen bist, wirst du erkennen, dass die Mehrzahl der jQuery-Funktionen nichts anderes macht als dynamische CSS zuzuweisen.

9

Ich werde mal sehen ob ich das Plugin nachbauen kann. CSS per JQuery verändern bekomme ich hin.
Falls ich Schwierigkeiten habe melde ich mich nochmal.

Danke schon mal :slight_smile:

10

Hätte nicht gedacht das es so einfach ist, Bootstrap ist viel mächtiger als ich mir vorgestellt hatte :slight_smile:

Zuerst mal mein Aktueller Code:

Code des per require eingebundenen Input Feldes:

[code]





[/code]

Code der Aufgerufenen Funktion:

function checktime(value) { if (value.length != 5) { return false; } zeit=value.toString(); zeit=zeit.split(":"); if (zeit[0].length == 2 && zeit[1].length == 2 && zeit[0] <= 23 && zeit[1] <= 59) { return true; } else { return false; } }

Eine Frage habe ich noch die sich mir nicht erschließt:
Wenn ich mehrere return ergebnisse von der Funktion zurückgebe wie muss dann meine if () abfrage aussehen?

Beispiel (wenn ich in der Funktion folgendes als return zurückgebe ist meine if Abfrage immer true):

return { valid: false, hinweis: "Das Datum ist nicht korrekt!" }

EDIT: Wie kann ich die einzelnen Felder jetzt beim Submit nochmal validieren oder haltet ihr das für überflüssig? PHP Validierung mach ich selbsverständlich auch.

11

Update:

Habe noch das „feedback-icon“ hinzugefügt und richtig positioniert.

$("#zeit").on("blur, mouseout", function () { var element = $(this); var value = element.find("input").val(); if (checktime(value)) { element.removeClass(); element.find(".form-control-feedback").remove(); element.addClass("input-group has-success has-feedback"); element.append('<span class="glyphicon glyphicon-ok form-control-feedback"></span>'); element.find(".form-control-feedback").css({"top": "0px"}); } else { element.removeClass(); element.find(".form-control-feedback").remove(); element.addClass("input-group has-error has-feedback"); element.append('<span class="glyphicon glyphicon-remove form-control-feedback"></span>'); element.find(".form-control-feedback").css({"top": "0px"}); } });

Dennoch habe ich noch nicht in Erfahrung gebracht wie ich mehrere returns entgegennehme…

12

Return beendet eine Funktion.

13

Man kann doch mit return mehrere Feedbacks zurückliefern außer true und false.
Quelle: http://stackoverflow.com/questions/2917175/return-multiple-values-in-javascript

Frage ist jetzt wie mache ich das wenn ich den Funktionsaufruf in einer if Abfrage mach?

14

Return beendet die Funktion sofort, aber kann als Rückgabewert natürlich auch eine Variable, Array, Object oder Funktion liefern.

15

Habe jetzt nach folgendem Beispiel gearbeitet und es bringt eine Fehlermeldung: http://stackoverflow.com/questions/19738207/return-two-variables-in-one-function

Funktion:

function checkdate(value) { if (value.length != 10) { return { bool: false, info: "Datum muss aus 10 Zeichen bestehen." }; } datum=value.toString(); datum=datum.split("."); datum[0]=parseInt(datum[0],10); datum[1]=parseInt(datum[1],10)-1; var kontrolldatum=new Date(datum[2],datum[1],datum[0]); if (kontrolldatum.getDate()==datum[0] && kontrolldatum.getMonth()==datum[1] && kontrolldatum.getFullYear()==datum[2]) { return { bool: true } } else { return { bool: false, info: "Datum hat nicht das richtige Format." }; } }

Aufruf:

$("#datum").on("blur, mouseout", function () { var element = $(this); var value = element.find("input").val(); var checkdate = checkdate(value); if (checkdate.bool) { element.removeClass(); element.find(".form-control-feedback, .form-control-info").remove(); element.addClass("input-group has-success has-feedback"); element.append('<span class="glyphicon glyphicon-ok form-control-feedback"></span>'); element.find(".form-control-feedback").css({"top": "0px"}); } else { element.removeClass(); element.find(".form-control-feedback, .form-control-info").remove(); element.addClass("input-group has-error has-feedback"); element.append('<span class="glyphicon glyphicon-remove form-control-feedback"></span>'); element.find(".form-control-feedback").css({"top": "0px"}); element.append('<span class="form-control-info">' + checkdate.info + '</span>'); } });

Es wird ein Javascript Fehler ausgegeben: Uncaught TypeError: undefined is not a function in Zeile 145:

144: var value = element.find("input").val(); 145: var checkdate = checkdate(value); 146: if (checkdate.bool) {

Das ist absolut unverständlich denn die Funktion ist ja da!

16

Hab meinen Fehler gefunden :slight_smile:

Name der Variable darf nicht gleich Name der Funktion sein :rolleyes:

144: var value = element.find("input").val(); 145: var ergebniss = checkdate(value); 146: if (ergebniss.bool) {

Jetzt funktioniert alles soweit wie gewünscht :smiley: