Bootstrap Frameset (Bootstrapvalidator)

bodo92 · 27 Oktober 2014

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:

<div class="input-group" id="datepicker">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
    <input type="text" name="datum" class="form-control" data-date-format="DD.MM.YYYY"/>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var tagNow = DateTimeNow.getDate(); var monatNow = (DateTimeNow.getMonth() + 1); var jahrNow = DateTimeNow.getFullYear(); var DatumNow = (tagNow + "." + monatNow + "." + jahrNow);
        var MilisecMin = (DateTimeNow.valueOf() - 1209600000); 
        var DateMin = new Date(MilisecMin);
        var tagMin = DateMin.getDate(); var monatMin = (DateMin.getMonth() + 1); var jahrMin = DateMin.getFullYear(); var DatumMin = (tagMin + "." + monatMin + "." + jahrMin);

        $("#datepicker").datetimepicker({
            defaultDate: DatumNow,
            minDate: DatumMin,
            maxDate: DatumNow,
            pickTime: false
        });

        $("#formular").bootstrapValidator({
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                datum: {
                    validators: {
                        callback: {
                            callback: function(value, validator, $field) {
                                if (value.length != 10) {
                                    return {
                                        valid: false,
                                        message: "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 true;
                                } else {
                                    return {
                                        valid: false,
                                        message: "Überprüfung des Datums ist fehlerhaft!"
                                    };
                                }
                            }
                        }
                    }
                }
            }
        });
    });
</script>

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 :)

Tronjer · 27 Oktober 2014

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.

bodo92 · 27 Oktober 2014

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

Tronjer · 27 Oktober 2014

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?

bodo92 · 27 Oktober 2014

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..

Tronjer · 27 Oktober 2014

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

ungetestet:

Code:

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

bodo92 · 27 Oktober 2014

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.

Tronjer · 27 Oktober 2014

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.

bodo92 · 28 Oktober 2014

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 :)

bodo92 · 28 Oktober 2014

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

Zuerst mal mein Aktueller Code:

Code des per require eingebundenen Input Feldes:

Code:

<div class="input-group" id="zeit">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
    <input type="text" name="zeit" class="form-control" data-date-format="HH:mm"/>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var stundenNow = DateTimeNow.getHours(); var minutenNow = DateTimeNow.getMinutes(); var ZeitNow = (stundenNow + ":" + minutenNow);

        $("#zeit").datetimepicker({
            defaultDate: ZeitNow,
            pickDate: false
        });

        $("#zeit :input").on("blur, mouseout", function () {
            var value = $(this).val();
            if (checktime(value)) {
                $("#zeit").removeClass();
                $("#zeit").addClass("input-group has-success");
            } else {
                $("#zeit").removeClass();
                $("#zeit").addClass("input-group has-error");
            }
        });
    });
</script>

Code der Aufgerufenen Funktion:

Code:

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):

Code:

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.

bodo92 · 28 Oktober 2014

Update:

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

Code:

$("#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..

Tronjer · 28 Oktober 2014

Return beendet eine Funktion.

bodo92 · 28 Oktober 2014

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?

Tronjer · 29 Oktober 2014

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

bodo92 · 29 Oktober 2014

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

Funktion:

Code:

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:

Code:

$("#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:

Code:

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!

bodo92 · 29 Oktober 2014

Hab meinen Fehler gefunden :)

Name der Variable darf nicht gleich Name der Funktion sein

Code:

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

Jetzt funktioniert alles soweit wie gewünscht

Bootstrap Frameset (Bootstrapvalidator)

bodo92

Aktives Mitglied

Tronjer

Senior HTML'ler

bodo92

Aktives Mitglied

Tronjer

Senior HTML'ler

bodo92

Aktives Mitglied

Tronjer

Senior HTML'ler

bodo92

Aktives Mitglied

Tronjer

Senior HTML'ler

bodo92

Aktives Mitglied

bodo92

Aktives Mitglied

bodo92

Aktives Mitglied

Tronjer

Senior HTML'ler

bodo92

Aktives Mitglied

Tronjer

Senior HTML'ler

bodo92

Aktives Mitglied

bodo92

Aktives Mitglied

Neueste Beiträge