How do I add a function to an element via jQuery?

Question

I want to do something like this:

$('.dynamicHtmlForm').validate = function() {
  return true;
}

$('.dynamicHtmlForm .saveButton').click(function() {
  if (!$(this).closest('.dynamicHtmlForm').validate()) {
    return false;
  }

  return true;
});

And then when I have a form of class dynamicHtmlForm, I want to be able to provide a custom validate() function:

$('#myDynamicHtmlForm').validate = function() {
  // do some validation

  if (there are errors) {
    return false;
  }

  return true;
}

But I get this when I do this:

$(this).closest(".dynamicHtmlForm").validate is not a function

Is what I've described even possible? If so, what am I doing wrong?

Answer 1

jQuery.fn.validate = function(options) {

        var defaults = {

            validateOPtions1 : '',

            validateOPtions2 : ''
        };

        var settings = $.extend({}, defaults, options);

        return this.each(function() {

            // you validation code goes here


        });
    };

    $(document).ready(function() {

        $('selector').click(function() {

            $('some selector').validate();

            // or if you used any options in your code that you
            // want the user to enter. then you go :
            $('some selector').validate({
                validateOPtions1: 'value1',
                validateOPtions2: 'value2'
            });

        });

    });

Answer 2

You're not adding the function to the element, you're adding it to the jQuery wrapper around the element. Every time you pass a selector to jQuery, it will create a new wrapper for the found elements:

$('#myEl'); // gives a jQuery wrapper object
$('#myEl'); // creates another jQuery wrapper object

If you save the wrapped element to a variable and use that later, it would be a different story because you're accessing the saved jQuery wrapper object.

var dynamicHtmlForm = $('.dynamicHtmlForm');
dynamicHtmlForm.validate = function() {
  return true;
}

$('.dynamicHtmlForm .saveButton').click(function() {
  if (dynamicHtmlForm.validate()) {
    return false;
  }

  return true;
}

You could also add the function directly to the element using

$('.dynamicHtmlForm')[0].validate = function () { return true; }

// and later...
if (!$(this).closest('.dynamicHtmlForm')[0].validate())

Or you could look at extending jQuery properly by writing a plugin.

Answer 3

Yes, it is technically possible. You will need to reference the element itself, however, and not the jQuery collection. This should work:

$('.dynamicHtmlForm').each(function (ix,o) {
  o.validate = function() {
    return true;
  }
});

$('.dynamicHtmlForm .saveButton').click(function() {
  if ($(this).closest('.dynamicHtmlForm')[0].validate()) {
    return false;
  }

  return true;
}