Parsley Form Validation - Event Listeners

javascript jquery html twitter-bootstrap parsley.js

11,722

Solution 1

You are doing what you shouldn't do. Looking at the Parsley docs one can see warning like this:

you must remove data-validate="parsley" auto-binding code in your forms DOM to allow you to override the default processing and use Parsley purely from javascript.

After that you can do $('.test').parsley(...).

Also note that you are hanging listeners incorrectly. The right way is to put them inside listenter: {} property just like this:

$('.test').parsley({
    listeners: {
        onFieldValidate: function(elem, ParsleyField) {
            console.log("validate", elem);
            return false;
        },
        onFieldError: function(elem, constraints, ParsleyField) {
            console.log("error", elem);
        }
    }
});

Simple example could be found here

Solution 2

You can simple check if your form is validated or not by using following code.

$( '#formId' ).parsley( 'isValid' );

11,722

Author by

Edward

Updated on June 28, 2022

Comments

Edward almost 2 years

Ok, so i have searched everywhere for this but still can't get it working. No one seems to have tried it but i'm sure it can do it.

I want to use the Parsley validation plugin with my twitter bootstrap project. I have read the docs, but am still learning JQuery so it's going right over my head (i'm rationalising that it is too advanced for me at the moment).

I want to add a custom event listener to Parsley to show a popup on error instead of the ugly li's. This is what i have tried:

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;
            }
        }

    });

});

The top function half works (only displays a bubble) was only a hack to get it working temporarily.

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>

Can anyone help me get this working? Note: I would prefer the bootstrap tooltip (as opposed to popover) but would be grateful if someone could help me with either.