ALL: Add plugin UMD wrapper, Closes jquery-validation#977

Author: Lars Laade

Gruntfile.js

@@ -3,23 +3,64 @@ module.exports = function(grunt) {
 
 "use strict";
 
+var banner,
+	umdStart,
+	umdMiddle,
+	umdEnd,
+	umdStandardDefine,
+	umdAdditionalDefine,
+	umdLocalizationDefine;
+
+banner = "/*!\n" +
+	" * jQuery Validation Plugin v<%= pkg.version %>\n" +
+	" *\n" +
+	" * <%= pkg.homepage  %>\n" +
+	" *\n" +
+	" * Copyright (c) <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>\n" +
+	" * Released under the <%= _.pluck(pkg.licenses, 'type').join(', ') %> license\n" +
+	" */\n";
+
+// define UMD wrapper variables
+
+umdStart = "(function( factory ) {\n" +
+	"\tif ( typeof define === \"function\" && define.amd ) {\n";
+
+umdMiddle = "\t} else {\n" +
+	"\t\tfactory( jQuery );\n" +
+	"\t}\n" +
+	"}(function( $ ) {\n\n";
+
+umdEnd = "\n}));";
+
+umdStandardDefine = "\t\tdefine( [\"jquery\"], factory );\n";
+umdAdditionalDefine = "\t\tdefine( [\"jquery\", \"./jquery.validate\"], factory );\n";
+umdLocalizationDefine = "\t\tdefine( [\"jquery\", \"../jquery.validate\"], factory );\n";
+
 grunt.initConfig({
 	pkg: grunt.file.readJSON("package.json"),
 	concat: {
-		options: {
-			banner: "/*!\n" +
-				" * jQuery Validation Plugin v<%= pkg.version %>\n" +
-				" *\n" +
-				" * <%= pkg.homepage  %>\n" +
-				" *\n" +
-				" * Copyright (c) <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>\n" +
-				" * Released under the <%= _.pluck(pkg.licenses, 'type').join(', ') %> license\n" +
-				" */\n"
-		},
 		// used to copy to dist folder
 		dist: {
+			options: {
+				banner: banner +
+					umdStart +
+					umdStandardDefine +
+					umdMiddle,
+				footer: umdEnd
+			},
+			files: {
+				"dist/jquery.validate.js": ["src/core.js", "src/*.js"]
+			}
+		},
+		extra: {
+			options: {
+				banner: banner +
+					umdStart +
+					umdAdditionalDefine +
+					umdMiddle,
+				footer: umdEnd
+			},
 			files: {
-				"dist/jquery.validate.js": ["src/core.js", "src/*.js"],
 				"dist/additional-methods.js": ["src/additional/additional.js", "src/additional/*.js"]
 			}
 		}
@@ -33,11 +74,20 @@ grunt.initConfig({
 				" * Copyright (c) <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>;" +
 				" Licensed <%= _.pluck(pkg.licenses, 'type').join(', ') %> */\n"
 		},
-		all: {
+		dist: {
 			files: {
-				"dist/jquery.validate.min.js": ["dist/jquery.validate.js"],
-				"dist/additional-methods.min.js": ["dist/additional-methods.js"]
+				"dist/additional-methods.min.js": ["dist/additional-methods.js"],
+				"dist/jquery.validate.min.js": ["dist/jquery.validate.js"]
 			}
+		},
+		all: {
+			files: [{
+				expand: true,
+				cwd: "dist/localization",
+				src: "**/*.js",
+				dest: "dist/localization",
+				ext: ".min.js"
+			}]
 		}
 	},
 	compress: {
@@ -49,14 +99,14 @@ grunt.initConfig({
 				pretty: true
 			},
 			src: [
-				"dist/*.js",
+				"dist/**/*.js",
 				"README.md",
 				"changelog.txt",
 				"Gruntfile.js",
 				"package.json",
 				"demo/**/*.*",
 				"lib/**/*.*",
-				"src/localization/**/*.*",
+				"src/**/*.*",
 				"test/**/*.*"
 			]
 		}
@@ -107,6 +157,33 @@ grunt.initConfig({
 			},
 			src: "src/**/*.*"
 		}
+	},
+	copy: {
+		dist: {
+			options: {
+				// append UMD wrapper
+				process: function ( content ) {
+					return umdStart + umdLocalizationDefine + umdMiddle + content + umdEnd;
+				}
+			},
+			files: [{
+				src: ["src/localization/*"],
+				dest: "dist/localization",
+				expand: true,
+				flatten: true,
+				filter: "isFile"
+			}]
+		}
+	},
+	replace: {
+		dist: {
+			src: ["dist/**/*.min.js"],
+			overwrite: true,
+			replacements: [{
+				from: "./jquery.validate",
+				to: "./jquery.validate.min"
+			}]
+		}
 	}
 });
 
@@ -117,9 +194,11 @@ grunt.loadNpmTasks("grunt-contrib-concat");
 grunt.loadNpmTasks("grunt-contrib-compress");
 grunt.loadNpmTasks("grunt-contrib-watch");
 grunt.loadNpmTasks("grunt-jscs-checker");
+grunt.loadNpmTasks("grunt-contrib-copy");
+grunt.loadNpmTasks("grunt-text-replace");
 
-grunt.registerTask("default", ["concat", "jscs", "jshint", "qunit"]);
-grunt.registerTask("release", ["default", "uglify", "compress"]);
+grunt.registerTask("default", ["concat", "copy", "jscs", "jshint", "qunit"]);
+grunt.registerTask("release", ["default", "uglify", "replace", "compress"]);
 grunt.registerTask("start", ["concat", "watch"]);
 
 };

README.md

@@ -38,12 +38,20 @@ Include jQuery and the plugin on a page. Then select a form to validate and call
 	<input required>
 </form>
 <script src="jquery.js"></script>
-<script src="jquery.validation.js"></script>
+<script src="jquery.validate.js"></script>
 <script>
 $("form").validate();
 </script>
 ```
 
+Alternatively include jQuery and the plugin via requirejs in your module.
+
+```js
+define(["jquery", "jquery.validate"], function( $ ) {
+	$("form").validate();
+});
+```
+
 For more information on how to setup a rules and customizations, [check the documentation](http://jqueryvalidation.org/documentation/).
 
 ## Reporting an Issue

demo/index.html

@@ -217,6 +217,8 @@ <h3>Synthetic examples</h3>
 		</li>
 		<li><a href="errors-within-labels.html">Displaying Errors within Field Labels</a>
 		</li>
+		<li><a href="requirejs/index.html">Loading via RequireJS</a>
+		</li>
 	</ul>
 	<h3>Real-world examples</h3>
 	<ul>

demo/requirejs/app.js

@@ -0,0 +1,9 @@
+require(["jquery", "../../dist/jquery.validate"], function($) {
+
+	$.validator.setDefaults({
+		submitHandler: function() { alert("submitted!"); }
+	});
+
+	// validate the comment form when it is submitted
+	$("#commentForm").validate();
+});

demo/requirejs/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>jQuery validation plug-in - requirejs demo</title>
+
+		<link rel="stylesheet" href="../css/screen.css" />
+
+		<style type="text/css">
+			#commentForm { width: 500px; }
+			#commentForm label { width: 250px; }
+			#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
+		</style>
+</head>
+<body>
+
+	<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
+	<div id="main">
+
+		<p>Default submitHandler is set to display an alert into of submitting the form</p>
+		<form class="cmxform" id="commentForm" method="get" action="">
+			<fieldset>
+				<legend>Please provide your name, email address (won't be published) and a comment</legend>
+				<p>
+					<label for="cname">Name (required, at least 2 characters)</label>
+					<input id="cname" name="name" minlength="2" type="text" required>
+				</p>
+				<p>
+					<label for="cemail">E-Mail (required)</label>
+					<input id="cemail" type="email" name="email" required>
+				</p>
+				<p>
+					<label for="curl">URL (optional)</label>
+					<input id="curl" type="url" name="url">
+				</p>
+				<p>
+					<label for="ccomment">Your comment (required)</label>
+					<textarea id="ccomment" name="comment" required></textarea>
+				</p>
+				<p>
+					<input class="submit" type="submit" value="Submit">
+				</p>
+			</fieldset>
+		</form>
+
+		<script>
+		var require = {
+			paths: {
+				"jquery": "../../lib/jquery-1.9.1"
+			}
+		};
+		</script>
+		<script src="../../lib/require.js" data-main="app.js"></script>
+	</div>
+</body>
+</html>