Petersilie-Formularüberprüfung - Ereignis-Listener

Question

Nov 19, 2013, 01:57 PM

twitter-bootstrap jquery html parsley.js javascript

Petersilie-Formularüberprüfung - Ereignis-Listener

Ok, also habe ich überall danach gesucht, kann es aber immer noch nicht zum Laufen bringen. Niemand scheint es versucht zu haben, aber ich bin sicher, dass es das kann.

Ich möchte das Parsley-Validierungs-Plugin mit meinem Twitter-Bootstrap-Projekt verwenden. Ich habe die Dokumentation gelesen, lerne aber immer noch JQuery, sodass es mir über den Kopf geht (ich begründe, dass es im Moment für mich zu fortgeschritten ist).

Ich möchte Parsley einen benutzerdefinierten Ereignis-Listener hinzufügen, um bei Fehlern anstelle der hässlichen Li ein Popup anzuzeigen. Das habe ich versucht:

JQUERY

$(document).ready(function () {

    $('.parsley').parsley({
        successClass: 'success',
        errorClass: 'error',
        errors: {
            classHandler: function(el) {
                return $(el).closest('.form-control');
            },
            errorsWrapper: '<div class=\"popover fade top in\" style=\"top: -20px\"></div>',
            errorElem: '<div></div>'
        }
    });


    $('.test').parsley({

        successClass: 'success',
        errorClass: 'error',
        errors: {
            classHandler: function(el) {
                return $(el).closest('.form-control');
            },
            errorElem: '<div></div>'
        },

        onFieldValidate: function ( elem ) {

            // if field is not visible, do nothing.
            if ( !$( elem ).is( ':visible' ) ) {
                $(elem).popover({
                    placement : 'top',
                    title : 'Test',
                    content : '<div id="popOverBox"><h4>Test</h4></div>'
                });
                $(elem).popover('show');
                return true;
            } else {
                $(elem).popover('hide');
                return false;
            }
        }

    });

});

Die obere Funktionshälfte funktioniert (zeigt nur eine Blase an) war nur ein Hack, um sie vorübergehend zum Laufen zu bringen.

HTML

<head>

    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/lib/parsley/parsley.min.js"></script>

</head>

<form class="test" data-validate="parsley" novalidate>
    <input type="text" name="test" value="test" data-required="true" data-trigger="keyup change">
</form>

Kann mir jemand helfen, das zum Laufen zu bringen? Hinweis: Ich würde den Bootstrap-Tooltip (im Gegensatz zu Popover) vorziehen, wäre aber dankbar, wenn mir jemand dabei helfen könnte.