JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<form method="POST" class="required">
    <ul>
        <li><input type="text" placeholder="Username" name="uname" class="required server" data-error="Please enter a Username" data-to="16" data-from="4"/></li>
    </ul>
    <button>Submit</button>
</form>

JavaScript

/**
 * Created with JetBrains PhpStorm.
 * User: Hutber
 * Date: 18/01/13
 * Time: 21:46
 * Forms plugin
 */
(function ($) {
    "use strict"; //For good development standards :)

    $.fn.forms = function (options) {
        options = options || {};

        var form = {};

        form.Globals = {
            $error:$('<span class="error"></span>'),
            $loading:$('<span class="loading">Loading</span>')
        };

        form.init = function(me){
            form.init.myself = me,
            form.init.mainItems = me.find($("select:visible,textarea:visible,input:visible")),
            form.init.checkBoxItems = me.find($("input[type=checkbox]:visible"));
            form.items.init();
            form.actions();
        };

        form.actions = function(){
            form.init.myself.submit( function (m) {
                form.init.mainItems.each(function(){
                    form.items.main($(this));

                });
                return form.validation.formWide();
            });
        };

        form.validation = {
            formWide:function(){
                if (form.init.myself.find('.error').length > 0){
                    return false;
                }
            },
            errorText:function(myself){
                //Set up the error message to be displayed
                //check to see if we have a custom message, otherwise display the default
                if(typeof (myself.data('error')) === "string"){
                    return myself.data('error');
                }else{
                    return "Please don't leave me empty!";
                }
            },
            checkCharLength:function (me){
                //Check to see if there is a character  limit set
                if(typeof (me.data('to')) !== "undefined" && me.parent().find('span').length===0){
                    var from = me.data('from'),
                        to = me.data('to');
                    if(me.val() && me.val().length <...