jquery-validation NPM module with browserify

Question

I have been battling over trying to get jquery-validation to work in my project, but it just doesn't seem to attach itself to my jquery object.

My package.json looks is:

{
  "name": "web01",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "2.1.3",
    "pathjs": "0.8.1",
        "jquery-validation" : "1.13.1"
  },
  "devDependencies": {
    "browserify": "8.0.2",
    "browserify-mustache": "0.0.4",
    "browserify-shim": "3.8.2",
    "phantomjs": "1.9.13",
    "mocha-phantomjs": "3.5.2",
    "mocha": "2.1.0",
    "sinon": "1.12.2",
    "proxyquireify": "1.1.0"
  },
  "browserify": {
    "transform": [
      "browserify-mustache",
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery" : "$",
    "jquery-validation": {
        "exports": "null",
        "depends": [ "jquery" ]
    }
  }
}

npm install picks everything up fine but when I try and call validate in a js file I just get an error saying the function is undefined. I have looked at about half a dozen stackoverflow questions but they haven't resolved my issue. I would have expected for validate to have been added to the jquery object, not sure if I should be calling require('jquery-validation') in my js file.

var $ = require('jquery');
var ajax = require('./ajax.js');

var constraints = {
    rules: {
        email: {
            required: true,
            email: true
        },
        displayName: "required",
        password: {
            required: true,
            minlength: 6,
            pattern: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$"
        }
    },
    messages: {
        required: "Email not provided",
        email: "this ain't no email"
    },
    displayName: {
        required: "display name required"
    },
    password: {
        required: "password required",
        minlength: "not long enough",
        pattern: "isn't complicated enough"
    },
    submitHandler: function($form) {

        var data = extractData($form);

        ajax.send({
           type: 'POST',
           url: '/register',
           data: data,
           error: function() {
               console.log('failed to register');
           }
        });

        function extractData($form) {
            return {
                email: $form.find('#email').val(),
                displayName: $form.find('#displayName').val(),
                password: $form.find('#password').val()
            };
        }
    }
};

function registration(e) {
    e.preventDefault();

    $('#registration-form').validate(constraints);
}

module.exports = {
    selector: '#registration-form',
    registration: registration
};

Anyone had a similar issue / any ideas of how to resolve this? I could use validate.js but I would prefer to use the jquery plugin if possible.

Thanks

Answer 1

• You don't need to shim jquery because it is compatible with node.
• To shime jquery.validate yo need to provide the path to the js file.
• You need to require jquery-validation in your js code.

package.json

{  
   "main":"./js/main.js",
   "browser":{  
      "jquery-validation":"./node_modules/jquery-validation/dist/jquery.validate.js"
   },
   "browserify-shim":{  
      "jquery-validation":{  
         "depends":[  
            "jquery:jQuery"
         ]
      }
   },
   "browserify":{  
      "transform":[  
         "browserify-shim"
      ]
   },
   "dependencies":{  
      "jquery":"^2.0.0",
      "jquery-validation":"^1.15.1"
   },
   "devDependencies":{  
      "browserify":"^13.1.0",
      "browserify-shim":"^3.8.12"
   }
}

Note: jquery.validate depend on jQuery version 2.0^ ( you can see in the package.json file of the jquery-validation's npm package ) so you have to set dependency on jquery ^2.0 in your project otherwise jquery-validation will load he's own version of jQuery and integration will not work.

main.js

var $= require("jquery");
require("jquery-validation");

console.log("jquery loaded ?", $ instanceof Function);
console.log("jquery.validate loaded?", $().validate instanceof Function);

Then in the local folder of the package.json:

make shure all dependency are instaled:

npm install

to build your bundle file:

browserify . -o ./js/bundle.js

Now if you run bundle.js in a browser and look at the console you will see:

jquery loaded ? true
jquery.validate loaded? true

---

Note: "depends":["jquery:jQuery"] mean that jquery.validation depentd on the package "jquery" and that it expet to find it on the global variable jQuery. For some rare jquery plugin you will need tu put $ instead.

If you are not shure you can look at the code of the jquery plugin you want to load, tipicaly:

function ($) {
 //Plugin code
}(jQuery);

will require "depends":["jquery:jQuery"]

function ($) {
 //Plugin code
}(windows.$);

will require "depends":["jquery:$"]

Answer 2

I solved this problem just today with the following configuration :

In package.json

  "browser": {
    "jquery-validate" :  "./node_modules/jquery-validation/dist/jquery.validate.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery-validate" :  {
      "depends" :  [
      "jQuery"
      ]
    }
  }

In my custom form.js, calling jquery + jquery validation

$ = jQuery = require('../../../config/node_modules/jquery');
require('../../../config/node_modules/jquery-validation/dist/jquery.validate.js');