0

I've been working on form validation for days. I'm trying to validate a multi step form.

I'm using Nodejs, ES6, Express, PUG. I'm having a hard time finding something that works. I think parsley would do it for me, but I cant get it to work with NodeJS.

For the code in my .js file (Where risk-calc is the id of my form):

$('.form-navigation .next').click(function() {
  if ($('#risk-calc').parsley().validate({group: 'block-' + curIndex()}))
    navigateTo(curIndex() + 1);

My console error is '$(...).parsley is not a function.'

I've installed via NPM parselyjs and jquery.

edit.

Attempting to use webpack to add global variables.

Something is still wrong, but how does this look?

plugins: [
    new ExtractTextPlugin('style.css'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      parsley: 'parsleyjs/dist/parsley.js'
    }),
Ian Ellis
  • 541
  • 6
  • 19
  • Please ask a specific question that will return a specific answer. https://stackoverflow.com/help/how-to-ask – Rob May 16 '19 at 19:21
  • I updated the topic as my specific question. Thank you for the response. – Ian Ellis May 16 '19 at 19:23
  • How did you include Parsley in your HTML code? Looks like only jQuery was loaded there. – Carsten May 16 '19 at 20:01
  • 1
    You will only need to provide the `jQuery` and `$` variables through the `ProvidePlugin`. Then in your entry js file right at the top you should import `parsleyjs` before using it in the file. This would attach the `parsleyjs` method to the global jquery object. You can just do `import 'parsleyjs'` without a variable. – Tameem Safi May 17 '19 at 08:09

1 Answers1

3

You will need to include the parsely javascript code after you include the jquery code. That will then extend the jquery object to have the parsely method.

If you have imported both through npm then you will need import the parsleyjs module at the top of your main entry file for you javascript before bundling it. I would recommend using webpack for the bundling.

import 'parsleyjs'

Usually jQuery can be added to your project files globally through the webpack provide plugin.

See: https://webpack.js.org/plugins/provide-plugin/

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
Tameem Safi
  • 728
  • 5
  • 6