html5forms-rails 0.1.3

data/vendor/assets/javascripts/jquery.html5form-shim.js

@@ -0,0 +1,402 @@
+/*
+* HTML5 Form Shim
+*
+* @package HTML5 Form Shim
+* @author $Author: sheiko $
+* @version $Id: jquery.html5form.js, v 0.9 $
+* @license GNU
+* @copyright (c) Dmitry Sheiko http://www.dsheiko.com
+*/
+(function( $ ) {
+
+    var ONINPUT_DELAY = 500,
+    Util = {
+        isString :  function(value) {
+            return typeof(value)=='string' && isNaN(value);
+        },
+        isNumber :  function(value) {
+            return !isNaN(parseFloat(value)) && isFinite(value);
+        },
+        log : function(val) {
+            var placeholder = $('.log');
+            if (placeholder.length) {
+                placeholder.html(placeholder.html() + val + '<br />');
+            }
+        }
+    },
+    Browser = {
+        /**
+         *  List of supported types of input element
+         *  Run through HTML5's new input types to see if the UA understands any.
+         *  Implementation adopted from http://www.modernizr.com
+         */
+        supportedInputTypes: (function() {
+            var inputElem = document.createElement('input'),
+            types = (function(props) {
+            for ( var i = 0, types =[], len = props.length; i < len; i++ ) {
+                inputElem.setAttribute('type', props[i]);
+                types[props[i]] = !!(inputElem.type !== 'text');
+            }
+            return types;
+            })('search tel url email datetime date month week time datetime-local number range color'.split(' '));
+          return types;
+        }()),
+        /*
+         * List of supported properties of input element
+         * Run through HTML5's new input attributes to see if the UA understands any.
+         * Implementation adopted from http://www.modernizr.com
+         *  spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
+         */
+        supportedInputProps: (function() {
+            var inputElem = document.createElement('input'),
+                attrs = (function( props ) {
+                    for ( var i = 0, attrs = [], len = props.length; i < len; i++ ) {
+                        attrs[ props[i] ] = !!(props[i] in inputElem);
+                    }
+                    return attrs;
+                })('autocomplete autofocus list placeholder max min multiple pattern required step'
+                    .split(' '));
+            return attrs;
+        }())
+    },
+    App = {
+        init: function() {
+            // The scope extends with custom validators
+            $.extend(true, App, $.setCustomInputTypeValidator);
+            $("form").each(function(){
+                var _form = new App.Form($(this));
+                _form.init();
+            });
+        },
+        Form : function(form) {
+            var _private = {
+                form : form,
+                elements: [],
+                handleOnSubmit : function(e) {
+                   e.preventDefault();
+                   var context = e.data;
+                   if (!context.isCustomValidation() && context.isNoValidate()) {
+                       return;
+                   }
+                   for(var i in _private.elements) {
+                       var element = _private.elements[i];
+                       element.recheckSetCustomValidity(); // If a custom validation message defined (via AJAX) before form submitted
+                       if ((typeof element.element.attr('required') !== 'undefined') &&
+                           (element.element.val() === element.element.attr('placeholder')
+                           || !element.element.val())) {
+                           element.showTooltip("Please fill out this field");
+                           context.setInvalid();
+                           return;
+                       }
+                       if (!element.isValid()) {
+                           element.showTooltip();
+                           context.setInvalid();
+                           return;
+                       }
+                   }
+                   context.setValid();
+               },
+               normalizeName : function(str) {
+                   str += '';
+                   return str.charAt(0).toUpperCase() + (str.substr(1).toLowerCase());
+               }
+            };
+            return {
+               isCustomValidation: function() { return (typeof _private.form.attr('custom-validation') !== "undefined"); },
+               isNoValidate: function() { return (typeof _private.form.attr('novalidate') !== "undefined"); },
+               setValid: function() {
+                   _private.form.addClass('valid').removeClass('invalid');
+               },
+               setInvalid: function() {
+                   _private.form.addClass('invalid').removeClass('valid');
+               },
+               init : function() {
+                   var context = this;
+                   if (this.isCustomValidation()) {
+                       _private.form.attr("novalidate", "novalidate");
+                   }
+                    _private.form.find("input, textarea").each(function(){
+                        var instance = context.makeElementInstance($(this));
+                        if (instance !== false) {
+                            _private.elements.push(instance);
+                        }
+                    });
+                    _private.form.bind('submit', this, _private.handleOnSubmit);
+               },
+               makeElementInstance : function(element) {
+                   var instance = {}, textAliases = {
+                       "Password": true, "Tel": true, "Search": true
+                   },
+                   type = _private.normalizeName(element.attr('type'));
+                   type = (typeof textAliases[type] !== "undefined" ? "Text" : type);
+                   if (typeof App[type] === "undefined") {
+                       return false;
+                   }
+                   $.extend(true, instance, new App[type]);
+                   $.extend(true, instance, App.Element_Abstract);
+                   instance.process(element);
+                   return instance;
+               }
+            }
+        },
+        Element_Abstract: {
+            element : null,
+            hasPlaceholder: false,
+            _delayedRequest: null,
+            _validityProps: "valueMissing typeMismatch patternMismatch rangeUnderflow rangeOverflow customError".split(" "),
+            validationMessage : {
+                valueMissing : "Please fill out this field",
+                typeMismatch : "",
+                patternMismatch : "The pattern is mismatched",
+                rangeUnderflow: "The value is too low",
+                rangeOverflow: "The value is too high",
+                customError: ""
+            },
+            getValidationMessage : function() {
+                var message = "";
+                for (var i in this._validityProps) {
+                  message = (!this.validity[this._validityProps[i]] && this.validationMessage[this._validityProps[i]].length)
+                        ? this.validationMessage[this._validityProps[i]] : message;
+                }
+                return message;
+            },
+            validity : {
+                valueMissing : true,
+                typeMismatch : true,
+                patternMismatch : true,
+                rangeUnderflow: true,
+                rangeOverflow: true,
+                customError: true
+            },
+            isValid : function() {
+                this.validity.customError = !(this.element.data('customvalidity')
+                    && this.element.data('customvalidity').length);
+                return this.validity.valueMissing &&
+                this.validity.typeMismatch &&
+                this.validity.patternMismatch &&
+                this.validity.rangeUnderflow &&
+                this.validity.rangeOverflow &&
+                this.validity.customError;
+            },
+            handleOnInput: function(e) {
+                var context = e.data;
+                if (null !== this._delayedRequest) {
+                    window.clearTimeout(this._delayedRequest);
+                }
+                this._delayedRequest = window.setTimeout(function(){
+                    this._delayedRequest = null;
+                    context.processOninput();
+                    context.element.trigger("oninput", context);
+                    context.checkValidity();
+                    context.checkPatternValidity();
+                    context.updateStatus();
+                }, ONINPUT_DELAY);
+            },
+            handleOnFocus : function(e) {
+                var context = (typeof e === 'undefined' ? this : e.data);
+                context.element.addClass('focus');
+                if (context.element.val() === context.element.attr('placeholder')) {
+                    context.element.val('');
+                    context.element.removeClass('placeholder');
+                }
+
+            },
+            handleOnBlur : function(e) {
+                var context = (typeof e === 'undefined' ? this : e.data);
+                context.element.removeClass('focus');
+                if (!context.element.val()) {
+                    context.element.val(context.element.attr('placeholder'));
+                    context.element.addClass('placeholder');
+                }
+            },
+            isset : function(prop) {
+                return (typeof this[prop] !== 'undefined');
+            },
+            issetAttr : function(attr) {
+                return (typeof this.element.attr(attr) !== 'undefined');
+            },
+            process: function(element) {
+                this.element = element;
+                if (this.isset("init")) {
+                    this.init();
+                }
+                if (!Browser.supportedInputProps.placeholder) {
+                    this.processPlaceholder();
+                    this.element.bind('focusin', this, this.handleOnFocus);
+                    this.element.bind('focusout', this, this.handleOnBlur);
+                }
+                if (!Browser.supportedInputProps.required) {
+                    this.processRequired();
+                }
+                if (!Browser.supportedInputProps.autofocus) {
+                    this.processAutofocus();
+                }
+                if (this.element.attr('custom-validation')) {
+                    this.element.attr('novalidate', 'novalidate');
+                }
+                if (!Browser.supportedInputTypes[this.element.attr('type')]
+                    || this.element.attr('custom-validation')) {
+                    this.syncElementUI();
+                }
+                // When customError message is specified while intitialization
+                this.processSetCustomValidity();
+            },
+            syncElementUI: function() {
+                this.element.bind('change', this, this.handleOnInput);
+                this.element.bind('mouseup', this, this.handleOnInput);
+                this.element.bind('keydown', this, this.handleOnInput);
+                // @TODO: Context menu handling: this.element.get().oncontextmenu =  _private.handleOnInput;
+
+            },
+            recheckSetCustomValidity: function() {
+                if (typeof this.element.data('customvalidity') !== "undefined"
+                    && this.element.data('customvalidity').length) {
+                    this.validationMessage.customError = this.element.data('customvalidity');
+                }
+            },
+            processSetCustomValidity: function() {
+                if (typeof this.element.data('customvalidity') !== "undefined"
+                    && this.element.data('customvalidity').length) {
+                    this.validationMessage.typeMismatch
+                        = this.validationMessage.patternMismatch
+                        = this.element.data('customvalidity');
+                    this.element.data('customvalidity', ''); // by default valid
+                }
+            },
+            processRequired: function() {
+                if (typeof this.element.attr('required') !== 'undefined') {
+                    this.element.addClass('required');
+                }
+            },
+            processAutofocus: function() {
+                if (this.issetAttr("autofocus")) {
+                    this.element.focus();
+                    this.handleOnFocus();
+                }
+            },
+            processPlaceholder: function() {
+                if (this.issetAttr("placeholder")) {
+                    this.element.attr("autocomplete", "false");
+                    this.hasPlaceholder = true;
+                    this.handleOnBlur();
+                }
+            },
+            processOninput: function() {
+                if (this.issetAttr("oninput")) {
+                    var callbackKey = this.element.attr("oninput"), pos = callbackKey.indexOf("(");
+                    callbackKey = pos ? callbackKey.substr(0, pos) : callbackKey;
+                    if (typeof window[callbackKey]) {
+                        window[callbackKey](this.element);
+                    }
+                }
+            },
+            checkPatternValidity: function() {
+                if (!this.element.attr('pattern')) {
+                    return true;
+                }
+                if (this.element.attr('title')) {
+                    this.validationMessage.patternMismatch = this.element.attr('title');
+                }
+                var pattern = new RegExp(this.element.attr('pattern'), 'g');
+                this.validity.patternMismatch = pattern.test(this.element.val());
+            },
+            updateStatus: function() {
+                this.element.removeClass('valid').removeClass('invalid');
+                this.element.addClass(this.isValid() ? 'valid' : 'invalid');
+            },
+            showTooltip : function(error) {
+               if (!error) {
+                    error = this.getValidationMessage(this);
+               }
+               $.setCustomValidityCallback.apply(this.element, [error]);
+            }
+        },
+        Email: function() {
+            return {
+                init: function() {
+                    this.validationMessage.typeMismatch = "Please enter a valid email address";
+                },
+                checkValidity: function() {
+                    var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/g;
+                    this.validity.typeMismatch = pattern.test(this.element.val());
+                }
+            }
+        },
+       Number: function() {
+            return {
+                init: function() {
+                    this.validationMessage.typeMismatch = "Please enter a valid number";
+                },
+                checkValidity: function() {
+                    this.validity.typeMismatch = Util.isNumber(this.element.val());
+                    this.validity.rangeUnderflow = !(this.issetAttr('min')
+                        && parseInt(this.element.val()) < parseInt(this.element.attr('min')));
+                    this.validity.rangeOverflow = !(this.issetAttr('max')
+                        && parseInt(this.element.val()) > parseInt(this.element.attr('max')));
+
+                    return true;
+                }
+            }
+       },
+       Url: function() {
+            return {
+                init: function() {
+                    this.validationMessage.typeMismatch = "Please enter a valid URL";
+                },
+                checkValidity: function() {
+                    //The pattern is taken from http://stackoverflow.com/questions/2838404/javascript-regex-url-matching
+                    var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
+                        '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
+                        '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
+                        '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
+                        '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
+                        '(\#[-a-z\d_]*)?$','i'); // fragment locater
+                    this.validity.typeMismatch = pattern.test(this.element.val());
+                }
+            }
+        },
+        Text: function() {
+            return {
+                checkValidity: function() {
+                }
+            }
+        }
+    };
+
+    /**
+     * Object containing custom validators like zipcode, username and so on
+     */
+    $.setCustomInputTypeValidator = {};
+
+    /**
+     * Renders tooltip when validation error happens on form submition
+     * Can be overriden
+     */
+     $.setCustomValidityCallback = function(error) {
+       var pos = this.position(),
+       tooltip = $('<div class="tooltip tooltip-e">'
+           + '<div class="tooltip-arrow tooltip-arrow-e"></div>'
+           + '<div class="tooltip-inner">' + error + '</div>'
+       + '</div>').appendTo(this.parent());
+       tooltip.css('top', pos.top - (tooltip.height() / 2) + 20 );
+       tooltip.css('left', pos.left - tooltip.width() - 12);
+       window.setTimeout(function(){
+            tooltip.remove();
+       }, 2500);
+    }
+    /**
+     * Shim for setCustomValidity DOM element method
+     */
+    $.fn.setCustomValidity = function(error) {
+        this.each(function() {
+            if (typeof $(this).get(0).setCustomValidity === 'function') {
+                $(this).get(0).setCustomValidity(error);
+            }
+            $(this).data('customvalidity', error);
+        });
+    }
+// Document is ready
+$(document).bind('ready.html5formshim', App.init);
+
+
+})( jQuery );

data/vendor/assets/javascripts/jquery.html5form.min.js

@@ -0,0 +1,4 @@
+/**
+ * jQuery HTML5form by http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html
+ */
+(function($){$.fn.html5form=function(options){$(this).each(function(){var defaults={async:true,method:$(this).attr('method'),responseDiv:null,labels:'show',colorOn:'#000000',colorOff:'#a1a1a1',action:$(this).attr('action'),messages:false,emptyMessage:false,emailMessage:false,allBrowsers:true};var opts=$.extend({},defaults,options);if(!opts.allBrowsers){if($.browser.webkit&&parseInt($.browser.version)>=533){return false}if($.browser.mozilla&&parseInt($.browser.version)>=2){return false}if($.browser.opera&&parseInt($.browser.version)>=11){return false}}var form=$(this);var required=new Array();var email=new Array();function fillInput(input){if(input.attr('placeholder')&&input.attr('type')!='password'){input.val(input.attr('placeholder'));input.css('color',opts.colorOff)}else{if(!input.data('value')){if(input.val()!=''){input.data('value',input.val())}}else{input.val(input.data('value'))}input.css('color',opts.colorOn)}}if(opts.labels=='hide'){$(this).find('label').hide()}$.each($('select',this),function(){$(this).css('color',opts.colorOff);$(this).change(function(){$(this).css('color',opts.colorOn)})});$.each($(':input:visible:not(:button, :submit, :radio, :checkbox, select)',form),function(i){fillInput($(this));if(this.getAttribute('required')!=null){required[i]=$(this)}if(this.getAttribute('type')=='email'){email[i]=$(this)}$(this).bind('focus',function(ev){ev.preventDefault();if(this.value==$(this).attr('placeholder')){if(this.getAttribute('type')!='url'){$(this).attr('value','')}}$(this).css('color',opts.colorOn)});$(this).bind('blur',function(ev){ev.preventDefault();if(this.value==''){fillInput($(this))}else{if((this.getAttribute('type')=='url')&&($(this).val()==$(this).attr('placeholder'))){fillInput($(this))}}});$('textarea').filter(this).each(function(){if($(this).attr('maxlength')>0){$(this).keypress(function(ev){var cc=ev.charCode||ev.keyCode;if(cc==37||cc==39){return true}if(cc==8||cc==46){return true}if(this.value.length>=$(this).attr('maxlength')){return false}else{return true}})}})});$.each($('input:submit, input:image, input:button',this),function(){$(this).bind('click',function(ev){var emptyInput=null;var emailError=null;var input=$(':input:visible:not(:button, :submit, :radio, :checkbox, select)',form);$(required).each(function(key,value){if(value==undefined){return true}if(($(this).val()==$(this).attr('placeholder'))||($(this).val()=='')){emptyInput=$(this);if(opts.emptyMessage){$(opts.responseDiv).html('<p>'+opts.emptyMessage+'</p>')}else if(opts.messages=='es'){$(opts.responseDiv).html('<p>El campo '+$(this).attr('title')+' es requerido.</p>')}else if(opts.messages=='en'){$(opts.responseDiv).html('<p>The '+$(this).attr('title')+' field is required.</p>')}else if(opts.messages=='it'){$(opts.responseDiv).html('<p>Il campo '+$(this).attr('title')+' &eacute; richiesto.</p>')}else if(opts.messages=='de'){$(opts.responseDiv).html('<p>'+$(this).attr('title')+' ist ein Pflichtfeld.</p>')}else if(opts.messages=='fr'){$(opts.responseDiv).html('<p>Le champ '+$(this).attr('title')+' est requis.</p>')}else if(opts.messages=='nl'||opts.messages=='be'){$(opts.responseDiv).html('<p>'+$(this).attr('title')+' is een verplicht veld.</p>')}else if(opts.messages=='br'){$(opts.responseDiv).html('<p>O campo '+$(this).attr('title')+' &eacute; obrigat&oacute;rio.</p>')}else if(opts.messages=='br'){$(opts.responseDiv).html("<p>Insira um email v&aacute;lido por favor.</p>")}return false}return emptyInput});$(email).each(function(key,value){if(value==undefined){return true}if($(this).val().search(/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/i)){emailError=$(this);return false}return emailError});if(!emptyInput&&!emailError){$(input).each(function(){if($(this).val()==$(this).attr('placeholder')){$(this).val('')}});if(opts.async){var formData=$(form).serialize();$.ajax({url:opts.action,type:opts.method,data:formData,success:function(data){if(opts.responseDiv){$(opts.responseDiv).html(data)}$(input).val('');$.each(form[0],function(){fillInput($(this).not(':hidden, :button, :submit, :radio, :checkbox, select'));$('select',form).each(function(){$(this).css('color',opts.colorOff);$(this).children('option:eq(0)').attr('selected','selected')});$(':radio, :checkbox',form).removeAttr('checked')})}})}else{$(form).submit()}}else{if(emptyInput){$(emptyInput).focus().select()}else if(emailError){if(opts.emailMessage){$(opts.responseDiv).html('<p>'+opts.emailMessage+'</p>')}else if(opts.messages=='es'){$(opts.responseDiv).html('<p>Ingrese una direcci&oacute;n de correo v&aacute;lida por favor.</p>')}else if(opts.messages=='en'){$(opts.responseDiv).html('<p>Please type a valid email address.</p>')}else if(opts.messages=='it'){$(opts.responseDiv).html("<p>L'indirizzo e-mail non &eacute; valido.</p>")}else if(opts.messages=='de'){$(opts.responseDiv).html("<p>Bitte eine g&uuml;ltige E-Mail-Adresse eintragen.</p>")}else if(opts.messages=='fr'){$(opts.responseDiv).html("<p>Entrez une adresse email valide s&rsquo;il vous plait.</p>")}else if(opts.messages=='nl'||opts.messages=='be'){$(opts.responseDiv).html('<p>Voert u alstublieft een geldig email adres in.</p>')}$(emailError).select()}else{alert('Unknown Error')}}return false})})})}})(jQuery);

data/vendor/assets/javascripts/jquery.placehold.min.js

@@ -0,0 +1,7 @@
+/************************************************************************************
+** jQuery Placehold version 0.2
+** (cc) Jason Garber (http://sixtwothree.org and http://www.viget.com)
+** Licensed under the CC-GNU GPL (http://creativecommons.org/licenses/GPL/2.0/)
+*************************************************************************************/
+
+(function($){$.fn.placehold=function(options){var opts=$.extend({},$.fn.placehold.defaults,options),supported=$.fn.placehold.is_supported();function toggle(arr){for(i=0;i<arr.length;i++){arr[i].toggle()}}return this.each(function(){if(!supported){var elem=$(this),placeholder_attr=elem.attr("placeholder"),is_password=(elem.attr("type")=="password")?true:false;if(placeholder_attr){if(!elem.val()||elem.val()==placeholder_attr){elem.addClass(opts.placeholderClassName).val(placeholder_attr)}elem.focus(function(){if(elem.val()==placeholder_attr){elem.removeClass(opts.placeholderClassName).val("")}});elem.blur(function(){if(!elem.val()){if(is_password){toggle([elem,elem_stub])}elem.addClass(opts.placeholderClassName).val(placeholder_attr)}});elem.closest("form").submit(function(){if(elem.val()==placeholder_attr){if(is_password){toggle([elem,elem_stub])}elem.val("")}return true});if(is_password){var elem_stub=$('<input type="text" class="'+opts.placeholderClassName+'" value="'+placeholder_attr+'" />');elem_stub.focus(function(){toggle([elem,elem_stub]);elem.focus()});elem.hide().after(elem_stub)}}}})};$.fn.placehold.is_supported=function(){return"placeholder" in document.createElement("input")};$.fn.placehold.defaults={placeholderClassName:"placeholder"}})(jQuery);