Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Remove support for metadata plugin, replace with data-rule- and data-…

…msg- (added in 907467e) properties.
  • Loading branch information...
commit 6df33a8ccc871bbcfafcfc4d5f5658cf63f5e8be 1 parent 5ec962e
@mlynch mlynch authored committed
View
38 demo/custom-messages-metadata-demo.html → demo/custom-messages-data-demo.html
@@ -8,18 +8,16 @@
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>
-<script src="../lib/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
- $("#commentForm").validate({meta: "validate"});
- $("#commentForm2").validate();
- $("#commentForm3").validate({
+ $("#commentForm").validate();
+ $("#commentForm2").validate({
messages: {
email: {
required: 'Enter this!'
}
- }
+ }
});
});
@@ -28,54 +26,41 @@
<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
-form label.error,
+form label.error,
form 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>Take a look at the source to see how messages can be customized with metadata.</p>
+<p>Take a look at the source to see how messages can be customized with metadata.</p>
-<!-- Custom messages with custom "meta" setting -->
+<!-- Custom rules and messages via data- attributes -->
<form class="cmxform" id="commentForm" method="post" action="">
<fieldset>
<legend>Please enter your email address</legend>
<p>
<label for="cemail">E-Mail *</label>
- <input id="cemail" name="email" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/>
+ <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
-<!-- Custom messages with default "meta" setting -->
-<form class="cmxform" id="commentForm2" method="post" action="">
- <fieldset>
- <legend>Please enter your email address</legend>
- <p>
- <label for="cemail">E-Mail *</label>
- <input id="cemail" name="email" class="{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}"/>
- </p>
- <p>
- <input class="submit" type="submit" value="Submit"/>
- </p>
- </fieldset>
-</form>
<!-- Custom message for "required" in metadata is overriden by a validate option -->
-<form class="cmxform" id="commentForm3" method="post" action="">
+<form class="cmxform" id="commentForm2" method="post" action="">
<fieldset>
<legend>Please enter your email address</legend>
<p>
<label for="cemail">E-Mail *</label>
- <input id="cemail" name="email" class="{required:true, email:true, messages:{email:'Please enter a valid email address'}}"/>
+ <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
@@ -85,8 +70,5 @@ <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-vali
<a href="index.html">Back to main page</a>
-<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
-<script type="text/javascript">_uacct = "UA-2623402-1";urchinTracker();</script>
-
</body>
</html>
View
2  demo/index.html
@@ -198,7 +198,7 @@ <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-vali
<h3>Syntetic examples</h3>
<ul>
<li><a href="errorcontainer-demo.html">Error message containers in action</a></li>
- <li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li>
+ <li><a href="custom-messages-data-demo.html">Custom Messages as Element Data</a></li>
<li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li>
<li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li>
<li><a href="custom-methods-demo.html">Custom methods and message display.</a></li>
View
43 jquery.validate.js
@@ -148,9 +148,9 @@ $.extend($.fn, {
var data = $.validator.normalizeRules(
$.extend(
{},
- $.validator.metadataRules(element),
$.validator.classRules(element),
$.validator.attributeRules(element),
+ $.validator.dataRules(element),
$.validator.staticRules(element)
), element);
@@ -572,16 +572,6 @@ $.extend($.validator, {
},
// return the custom message for the given element and validation method
- // specified in the element's "messages" metadata
- customMetaMessage: function(element, method) {
- if (!$.metadata) {
- return;
- }
- var meta = this.settings.meta ? $(element).metadata()[this.settings.meta] : $(element).metadata();
- return meta && meta.messages && meta.messages[method];
- },
-
- // return the custom message for the given element and validation method
// specified in the element's HTML5 data attribute
customDataMessage: function(element, method) {
return $(element).data('msg-' + method.toLowerCase()) || (element.attributes && $(element).attr('data-msg-' + method.toLowerCase()));
@@ -607,7 +597,6 @@ $.extend($.validator, {
return this.findDefined(
this.customMessage( element.name, method ),
this.customDataMessage( element, method ),
- this.customMetaMessage( element, method ),
// title is never undefined, so handle empty string as undefined
!this.settings.ignoreTitle && element.title || undefined,
$.validator.messages[method],
@@ -877,15 +866,16 @@ $.extend($.validator, {
return rules;
},
- metadataRules: function(element) {
- if (!$.metadata) {
- return {};
+ dataRules: function(element) {
+ var method, value,
+ rules = {}, $element = $(element);
+ for (method in $.validator.methods) {
+ value = $element.data('rule-' + method.toLowerCase());
+ if (value !== undefined) {
+ rules[method] = value;
+ }
}
-
- var meta = $.data(element.form, 'validator').settings.meta;
- return meta ?
- $(element).metadata()[meta] :
- $(element).metadata();
+ return rules;
},
staticRules: function(element) {
@@ -935,8 +925,14 @@ $.extend($.validator, {
}
});
$.each(['rangelength', 'range'], function() {
+ var parts;
if (rules[this]) {
- rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+ if ($.isArray(rules[this])) {
+ rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+ } else if (typeof rules[this] === 'string') {
+ parts = rules[this].split(/[\s,]+/);
+ rules[this] = [Number(parts[0]), Number(parts[1])];
+ }
}
});
@@ -954,11 +950,6 @@ $.extend($.validator, {
}
}
- // To support custom messages in metadata ignore rule methods titled "messages"
- if (rules.messages) {
- delete rules.messages;
- }
-
return rules;
},
View
122 lib/jquery.metadata.js
@@ -1,122 +0,0 @@
-/*
- * Metadata - jQuery plugin for parsing metadata from elements
- *
- * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
- *
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
- *
- */
-
-/**
- * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
- * in the JSON will become a property of the element itself.
- *
- * There are three supported types of metadata storage:
- *
- * attr: Inside an attribute. The name parameter indicates *which* attribute.
- *
- * class: Inside the class attribute, wrapped in curly braces: { }
- *
- * elem: Inside a child element (e.g. a script tag). The
- * name parameter indicates *which* element.
- *
- * The metadata for an element is loaded the first time the element is accessed via jQuery.
- *
- * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
- * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
- *
- * @name $.metadata.setType
- *
- * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("class")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from the class attribute
- *
- * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
- * @before $.metadata.setType("attr", "data")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a "data" attribute
- *
- * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
- * @before $.metadata.setType("elem", "script")
- * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
- * @desc Reads metadata from a nested script element
- *
- * @param String type The encoding type
- * @param String name The name of the attribute to be used to get metadata (optional)
- * @cat Plugins/Metadata
- * @descr Sets the type of encoding to be used when loading metadata for the first time
- * @type undefined
- * @see metadata()
- */
-
-(function($) {
-
-$.extend({
- metadata : {
- defaults : {
- type: 'class',
- name: 'metadata',
- cre: /({.*})/,
- single: 'metadata'
- },
- setType: function( type, name ){
- this.defaults.type = type;
- this.defaults.name = name;
- },
- get: function( elem, opts ){
- var settings = $.extend({},this.defaults,opts);
- // check for empty string in single property
- if ( !settings.single.length ) settings.single = 'metadata';
-
- var data = $.data(elem, settings.single);
- // returned cached data if it already exists
- if ( data ) return data;
-
- data = "{}";
-
- if ( settings.type == "class" ) {
- var m = settings.cre.exec( elem.className );
- if ( m )
- data = m[1];
- } else if ( settings.type == "elem" ) {
- if( !elem.getElementsByTagName )
- return undefined;
- var e = elem.getElementsByTagName(settings.name);
- if ( e.length )
- data = $.trim(e[0].innerHTML);
- } else if ( elem.getAttribute != undefined ) {
- var attr = elem.getAttribute( settings.name );
- if ( attr )
- data = attr;
- }
-
- if ( data.indexOf( '{' ) <0 )
- data = "{" + data + "}";
-
- data = eval("(" + data + ")");
-
- $.data( elem, settings.single, data );
- return data;
- }
- }
-});
-
-/**
- * Returns the metadata object for the first member of the jQuery object.
- *
- * @name metadata
- * @descr Returns element's metadata object
- * @param Object opts An object contianing settings to override the defaults
- * @type jQuery
- * @cat Plugins/Metadata
- */
-$.fn.metadata = function( opts ){
- return $.metadata.get( this[0], opts );
-};
-
-})(jQuery);
View
41 test/index.html
@@ -6,7 +6,6 @@
<script src="jquery.js"></script>
<script src="../lib/jquery.form.js"></script>
<script src="qunit/qunit.js"></script>
- <script src="../lib/jquery.metadata.js"></script>
<script src="../lib/jquery.mockjax.js"></script>
<script src="../jquery.validate.js"></script>
<script src="../additional-methods.js"></script>
@@ -57,10 +56,10 @@ <h2 id="qunit-userAgent"></h2>
<ol id="empty"></ol>
<form id="testForm1">
- <input type="text" class="{required:true,minlength:2}" title="buga" name="firstname" id="firstname" />
+ <input type="text" data-rule-required="true" data-rule-minlength="2" title="buga" name="firstname" id="firstname" />
<label id="errorFirstname" for="firstname" class="error">error for firstname</label>
- <input type="text" class="{required:true}" title="buga" name="lastname" id="lastname" />
- <input type="text" class="{required:true}" title="something" name="something" id="something" value="something" />
+ <input type="text" data-rule-required="true" title="buga" name="lastname" id="lastname" />
+ <input type="text" data-rule-required="true" title="something" name="something" id="something" value="something" />
</form>
<form id="testForm1clean">
@@ -71,22 +70,22 @@ <h2 id="qunit-userAgent"></h2>
</form>
<form id="userForm">
- <input type="text" class="{required:true}" name="username" id="username" />
+ <input type="text" data-rule-required="true" name="username" id="username" />
<input type="submit" name="submitButton" value="submitButtonValue" />
</form>
<form id="signupForm" action="form.php">
- <input id="user" name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
- <input type="password" name="password" id="password" class="{required:true,minlength:5}" />
+ <input id="user" name="user" title="Please enter your username (at least 3 characters)" data-rule-required="true" data-rule-minlength="3" />
+ <input type="password" name="password" id="password" data-rule-required="true" data-rule-minlength="5" />
</form>
<form id="testForm2">
- <input class="{required:true}" type="radio" name="agree" id="agb" />
+ <input data-rule-required="true" type="radio" name="agree" id="agb" />
<label for="agree" id="agreeLabel" class="xerror">error for agb</label>
</form>
<form id="testForm3">
- <select class="{required:true}" name="meal" id="meal" >
+ <select data-rule-required="true" name="meal" id="meal" >
<option value="">Please select...</option>
<option value="1">Food</option>
<option value="2">Milk</option>
@@ -101,22 +100,22 @@ <h2 id="qunit-userAgent"></h2>
</div>
<form id="testForm4">
- <input class="{foo:true}" name="f1" id="f1" />
- <input class="{bar:true}" name="f2" id="f2" />
+ <input data-rule-foo="true" name="f1" id="f1" />
+ <input data-rule-bar="true" name="f2" id="f2" />
</form>
<form id="testForm5">
- <input class="{equalTo:'#x2'}" value="x" name="x1" id="x1" />
- <input class="{equalTo:'#x1'}" value="y" name="x2" id="x2" />
+ <input data-rule-equalto="#x2" value="x" name="x1" id="x1" />
+ <input data-rule-equalto="#x1" value="y" name="x2" id="x2" />
</form>
<form id="testForm6">
- <input class="{required:true,minlength:2}" type="checkbox" name="check" id="form6check1" />
+ <input data-rule-required="true" data-rule-minlength="2" type="checkbox" name="check" id="form6check1" />
<input type="checkbox" name="check" id="form6check2" />
</form>
<form id="testForm7">
- <select class="{required:true,minlength:2}" name="selectf7" id="selectf7" multiple="multiple">
+ <select data-rule-required="true" data-rule-minlength="2" name="selectf7" id="selectf7" multiple="multiple">
<option id="optionxa" value="0">0</option>
<option id="optionxb" value="1">1</option>
<option id="optionxc" value="2">2</option>
@@ -131,12 +130,12 @@ <h2 id="qunit-userAgent"></h2>
</form>
<form id="testForm8">
- <input id="form8input" class="{required:true,number:true,rangelength:[2,8]}" name="abc" />
+ <input id="form8input" data-rule-required="true" data-rule-number="true" data-rule-rangelength="2,8" name="abc" />
<input type="radio" name="radio1"/>
</form>
<form id="testForm9">
- <input id="testEmail9" class="{required:true,email:true,messages:{required:'required',email:'email'}}" />
+ <input id="testEmail9" data-rule-required="true" data-rule-email="true" data-msg-required="required" data-msg-email="email" />
</form>
<form id="testForm10">
@@ -151,7 +150,11 @@ <h2 id="qunit-userAgent"></h2>
<form id="testForm12">
<!-- empty "type" attribute -->
- <input name="testForm12text" id="testForm12text" class="{required:true}" />
+ <input name="testForm12text" id="testForm12text" data-rule-required="true" />
+ </form>
+
+ <form id="dataMessages">
+ <input name="dataMessagesName" id="dataMessagesName" class="required" data-msg-required="You must enter a value here" />
</form>
<form id="dataMessages">
@@ -256,7 +259,7 @@ <h2 id="qunit-userAgent"></h2>
<input id="v2-i3" name="v2-i3" class="url" />
<input id="v2-i4" name="v2-i4" class="required" minlength="2" />
<input id="v2-i5" name="v2-i5" class="required" minlength="2" maxlength="5" customMethod1="123" />
- <input id="v2-i6" name="v2-i6" class="required customMethod2 {maxlength: 5}" minlength="2" />
+ <input id="v2-i6" name="v2-i6" class="required customMethod2" data-rule-maxlength="5" data-rule-minlength="2" />
<input id="v2-i7" name="v2-i7" />
</form>
View
2  test/rules.js
@@ -95,7 +95,7 @@ test("rules(), gurantee that required is at front", function() {
return result.join(" ");
}
equal( "required minlength", flatRules("#firstname") );
- equal( "required maxlength minlength", flatRules("#v2-i6") );
+ equal( "required minlength maxlength", flatRules("#v2-i6") );
equal( "required maxlength", flatRules("#co_name") );
QUnit.reset();
View
6 test/test.js
@@ -713,7 +713,7 @@ test("validating multiple checkboxes with 'required'", function() {
test("dynamic form", function() {
var counter = 0;
function add() {
- $("<input class='{required:true}' name='list" + counter++ + "' />").appendTo("#testForm2");
+ $("<input data-rule-required='true' name='list" + counter++ + "' />").appendTo("#testForm2");
}
function errors(expected, message) {
equal(expected, v.size(), message );
@@ -856,7 +856,7 @@ test("successlist", function() {
test("success isn't called for optional elements", function() {
expect(4);
- equal( "", $("#firstname").removeClass().val() );
+ equal( "", $("#firstname").removeAttr("data-rule-required").removeAttr("data-rule-minlength").val() );
$("#something").remove();
$("#lastname").remove();
$("#errorFirstname").remove();
@@ -888,7 +888,7 @@ test("success callback with element", function() {
test("all rules are evaluated even if one returns a dependency-mistmatch", function() {
expect(6);
- equal( "", $("#firstname").removeClass().val() );
+ equal( "", $("#firstname").removeAttr("data-rule-required").removeAttr("data-rule-minlength").val() );
$("#lastname").remove();
$("#errorFirstname").remove();
$.validator.addMethod("custom1", function() {

0 comments on commit 6df33a8

Please sign in to comment.
Something went wrong with that request. Please try again.