Overview

jQuery.formify

Formify is a simple jQuery plugin that, once called, substitutes all pre-existing DOM elements with the class formify suitable form input elements. The general concept is to simplify the repetitive task of creating edit-forms.

Live example

http://cbsmth.se/dev/jquery-formify/example.html

Usage

Include jQuery and formify in your document's header:

<script src="path/to/jquery.min.js"></script> <!-- Preferably on CDN -->
<script src="path/to/formify.min.js"></script>

Create form-tags and specify methods and actions. This isn't necesary per say, but formify will not do it for you, and you will not have a form otherwise.

Add the class formify to any element you would like to transform to a form input element. Its other classes will be maintained as well, as will the value. The element's ID will serve both as ID and name for the new element. If you provide a title-attribute, it will be used as a placeholder for the generated input element.

<p id="lastname" class="formify other_class" title="Your lastname">Norris</p>

Invoke the plugin by having some element -- such as a button -- call it:

<button type="button" onclick="jQuery('.formify').formify();">Formify!</button>

The above example then becomes:

<input type="text" name="lastname" id="lastname" class="formify other_class" value="Norris" placeholder="Your lastname">

Although the default type is text, formify can also create text areas and HTML5 input types. You specify your desired type by adding one of the following to your element's class:

  • formify-textarea
  • formify-email
  • formify-url
  • formify-number
  • formify-date

You can mark a field as required by adding formify-required as a class, and you can make other things -- such as the "Formify!" button mentioned above -- disappear by adding the class formify-remove.

The example page should provide a more thorough description of the plugin's functionality.

TODO

  • Behavior control (form method/action)
  • Function arguments: jQuery('.formify').formify('post', 'target-url');
  • "Advanced" input types
  • Select
  • Radio/Checkbox

Design principles

Formify should be inherently simple to use, meaning that it should not impose any requirement for the developer to hide or otherwise manipulate objects with self-authored JavaScript, CSS, etc.

Author

Fredrik Karlström

Licence

Distributed under the BSD licence:

Copyright 2012 (c) Fredrik Karlström fredrik@cbsmth.se

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.