migrating to latest jquery validate plugin

Question

I'm currently using the jquery validate plugin version 1.9.0 the latest is version 1.11.0. When i migrated to the latest version, the error checking on forms don't work. After reading the documentation and looking at the examples on the site, i still can't figure out a work around. (some of the examples don't work properly)

In my code i use the meta validate class to specify if a field is valid and would like to keep it in the html instead of specifying it in the JS.

 $("#report-listing-form").validate({
     meta: "validate",
     rules: {
         recaptcha_response_field: {
             required: true
         }
     },
     errorContainer: {},
     invalidHandler: function (event, validator) {
         var errors = validator.numberOfInvalids();
         if (errors) {
             var message = (errors == 1)
                                    ? '1 invalid field.'
                                    : errors + ' invalid fields.';

             $("#err_report-listing-form").html(message).addClass("text-error");
         }
     },
     submitHandler: function (form) {
         alert('works');
     }
 });

Sample of my code is here:

http://jsfiddle.net/deArQ/42/

For the metadata to work using the older plugin had to use this plugin

    /* ##################################################################################################### */
/* ##################################################################################################### */
/*
 * 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 This is a p
 * @before $.metadata.setType("class")
 * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
 * @desc Reads metadata from the class attribute
 * 
 * @example This is a 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 This is a 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);

Sparky · Accepted Answer

1) Pull out all of your inline rules. They apparently will not work like this...

class="{validate:{required:true, email: true}}"

Specify them all within .validate({...}) instead. Don't forget to put any names containing special characters within quotes.

rules: {
    'listing-report-email': {
        required: true,
        email: true
    }, 
    // your other rules
},

Working DEMO: http://jsfiddle.net/4VP9X/4/ (running jQuery 1.9.1 and JQuery Validate 1.11.0)

2) The maxWords rule requires the inclusion of the additional-methods.js file.

3) Don't forget to wrap your code within a DOM ready event handler function.

$(document).ready(function () {

    $("#report-listing-form").validate({
        // your rules & options
    });

});

4) I also have no idea what the meta: "validate" option is supposed to do for you. It's not documented anyplace that I can find, and your code seems to work the same without it.

5) errorContainer: {},

You've left your errorContainer: option empty. If that's intentional, you can simply leave out this option entirely. As per comments, replace it with the following errorPlacement callback function to suppress the error messages. Then style your .valid and .error CSS classes to highlight the valid and invalid fields accordingly.

http://jsfiddle.net/4VP9X/8/

errorPlacement: function(error, element) {
    return false;  // will suppress all validation messages
},

migrating to latest jquery validate plugin

Answers (1)

Related Questions