Question

Is it appropriate to create jQuery plugins which are specific to a single page? I’ve been creating generic plugins that are not tied to any context and contain no business logic, but some people I’ve talked to suggest that almost all javascript, including business logic and logic specific to a single page, should be inside of jQuery plugins.

Is it appropriate to have a validateformXYZ plugin which validates a specific HTML form?

I’m buying into jQuery 100% but am not sure if this is a misuse or not.

Answer 1

I tend to use a different approach to this. When I have objects (forms, usually) that need to have a lot of client-side behavior bound to them, I define JavaScript objects that represent those forms.

For example, a contact form might have a corresponding Contact object that gets initialized with the context of the inner-form elements (textboxes, buttons, etc.) During initialization you can then use jQuery (or your framework of choice) to add behaviors to these elements. In your case you’d bind a click event which would call a validation function in your Contact object.

This seems cleaner than creating a whole bunch of unrelated plugins to provide very specific behavior.

EDIT TO PROVIDE EXAMPLE

Here’s a quick & simple sample of this in action: http://jsbin.com/elefi/edit

The code:

if(typeof(MyDomain) == "undefined") {
  MyDomain = {};
  MyDomain.MyApp = {};
}

MyDomain.MyApp.ContactForm = function() {
  var $_submitButton;
  var $_firstNameTextBox;

  var _validateForm = function () {
    if($_firstNameTextBox.val() === '') {
        alert('Form Invalid');
    }
    else {
        alert('Form Valid');
    }    
  };

  return {
    initialize: function(submitButtonId, firstNameTextBoxId) {
      // Add context
      $_submitButton = $("#" + submitButtonId);
      $_firstNameTextBox = $("#" + firstNameTextBoxId)

      // Add behaviours
      $_submitButton.click(_validateForm);
    }
  }  
}();

// Emit this using your server-side code
$(function() {
    MyDomain.MyApp.ContactForm.initialize('SubmitButton', 'FirstName');
});

Note that IE6 seems to dislike jsbin.com, so open it in FF