Browserify and Parsley

Hi,

I have an issue with Parsley when I’m adding it via Browserify.

Uncaught TypeError: $(...).parsley is not a function

This is my script

var $ = require('jquery');
require('parsleyjs');

$("[data-parsley-validate]").parsley({
    trigger:      'change',
    errorClass: "parsley-error",
    classHandler: function (el) {
        return el.$element.closest('.form-item, .form-item--inline, .form-item--icon');
    },
    errorsContainer: function(pEle) {
        var $err = pEle.$element.closest('.form-item, .form-item--inline, .form-item--icon').append();
        return $err;
    }
});

I tried to use the window object but I got the same error.

I use Gulp with Browserify, others plugins works well with it. But I got the same error with slick carousel, then I used the build they made especially for Browserify and it worked.

Thanks!

[LeKangouroo]

I managed to use it with the ES2015 modules import syntax for those who are interested:

import Parsley from 'parsleyjs';

// NOTE: Parsley is not a constructor, therefore new Parsley() doesn't work.
const validator = new Parsley.Factory(formElement, options);

console.log('is valid', validator.isValid());

It doesn’t resolve the issue related to jQuery though.

[bajax]

This was blocking one of our projects, and after three hours digging deep in browserify, I think I’ve at least found an explanation for this:

Browserify treats all require calls as something to be compiled. This makes jQuery, for all intents and purposes, a compile-time dependency for ParsleyJS when referenced via Browserify-- and it REALLY shouldn’t be!

There doesn’t appear to be a way to fix this and still use es2015 syntax. It may be necessary to just check for a global jQuery variable and use that instead of the require syntax to get a reference to jQuery.