Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

Form suggestion and validation box in "Twitter style"


This plugins reproduces the same suggestion box style that you can see on Twitter signup page: https://twitter.com/signup

The usage is pretty simple. It shows a "tip" text when the input field is focused and a feedback when the validation passes or fails.

To perform the validation, it calls a user-defined function that, to finish the process, should fire a callback defined in the plugin.

For example, if we have this input field:

<input type="text" id="txtUsername" />

...we can set up the suggestion box to return an error only if there is no value:

$("#txtUsername").inputTip({
// Text displayed when the input passes the validation
goodText: "Ehi, it looks good!",
// Text displayed when the input doesn't pass the validation
badText: "Ouch, it looks empty!",
// Text displayed as a tip when the input field is focused
tipText: "Here, just input something",
/* Function called to validate the input. It should fire "callback" with the following parameters
*  First parameter:
*  - 0: validation failed
*  - 1: validation succeeded
*  - 2: show the tip text
* Second parameter: optional text to display instead of the standard text */
   validateText: function(inputValue, callback) {
      // Checking if the input field contains text.
      if (inputValue.length > 0) callback(1);
      else callback(0);
    },
// True if the validation should be performed on every key/up event (false by default)
validateInRealTime: false
});




The plugin is released under MIT license.

Downloads



5
Your rating: None Average: 5 (5 votes)