JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<form name="signup-form" autocomplete="off">
    <label for="firstname">Firstname:</label>
    <input id="firstname" name="firstname" type="text" title="Please enter your firstname" placeholder="Jonny" autofocus required data-fc-depends="#surname" />
    <label for="surname">Surname:</label>
    <input id="surname" name="surname" type="text" title="Please enter your surname" placeholder="Schnittger" required data-fc-depends="#firstname" />
    <label for="email">Email:</label>
    <input id="email" name="email" type="email" title="Please enter your email address" placeholder="[email protected]" required />
    <label for="website">Website:</label>
    <input id="website" name="website" type="url" title="Please enter the url to your website (optional)" placeholder="http://schnittger.me" />
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" title="Please enter a password, it must contain at least 1 lowercase and 1 uppercase character and be at least 6 characters in length" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" placeholder="******" required />
    <label for="checkbox">Is this checked?:</label>
    <input id="checkbox" name="checkbox" type="checkbox" checked />
    <label for="checkbox">Is this selected?:</label>
    <select id="options" name="options">
        <option value="opt-1">Option 1</option>
        <option value="opt-2">Option 2</option>
        <option value="opt-3">Option 3</option>
        <option value="opt-4">Option 4</option>
    </select>
    <input type="submit" value="Signup!" />
</form>

<h1>Signup Form </h1>

<form name="form1" method="post" action="" autocomplete="false">
    <p>
        <label for="fname">First Name <span class="star">*</span>

        </label>
        <input required type="text" name="fname" id="fname">
    </p>
    <p>
        <label for="lname">Last Name <span class="star">*</span>

  ...

CSS

form {
    width: 400px;
    margin: 0px auto;
}
input {
    display: block;
}
input:not([type=submit]):invalid {
    background-color: #ffdddd;
}
input:not([type=submit]):valid {
    background-color: #ddffdd;
}
input:not([type=submit]):invalid:required {
    background: #ffdddd url('http://www.developerdrive.com/wp-content/uploads/2013/08/asterisk1.png') no-repeat right top;
}
input:not([type=submit]):valid:required {
    background: #ddffdd url('http://www.developerdrive.com/wp-content/uploads/2013/08/asterisk1.png') no-repeat right top;
}
input:not([type=submit]):optional {
    background-color: #add1ef;
}

JavaScript

(function ($) {
    //window.localStorage.clear();
    /**
     * @module jquery-plugin
     * @return {jQuery}
     */
    var pluginName = 'formcache',
        defaults = {
            /**
             * which elements to ignore
             *
             * @property elements
             * @type string
             */
                'ignore': 'fc-ignore',
            /**
             * can i haz debug mode?
             *
             * @property debug
             * @type boolean
             */
                'debug': false
        };

    /**
     * __FormCache-Plugin__
     *
     * @class FormCache
     * @constructor
     * @param element {Object} element from selection
     * @param options {Object} plugin options
     * @chainable
     */
    function FormCache(element, options) {
        //passed selector
        this.element = element;
        //extend defaults with options
        this.options = $.extend({}, defaults, options);

        //store for future reference
        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    FormCache.prototype = {
        /**
         * inits formcache
         *
         * @method init
         */
        init: function () {
            var element = $(this.element);

            if (Modernizr.localstorage) {
                var key = element.attr('name'),
                    data = false;

                //cache hit
                if (localStorage[key]) {
                    data = JSON.parse(localStorage[key]);
                    if (this.options.debug === true) {
                        console.log('cache hit ' + JSON.stringify(data));
                    }
                }

                //cache miss
                if (!data) {
                    localStorage[key] = JSON.stringify({});
                    data = JSON.parse(localStorage[key]);
                    if (this.options.debug === true) {
                        console.log('cache miss ' +...