jquery-form-validator-rails 0.0.1 → 0.0.2

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    OTQwOGFiMjk2MTYwNGE2NGQxNzdmNDVlYWUyNGZiNDFkNjJjNzA2Yw==
-  data.tar.gz: !binary |-
-    MzFlZDVkOWZhY2FlNzczZTk1NDkzNjcyMGRiMGVlMDc5NmE4M2Y4Ng==
+SHA1:
+  metadata.gz: eaddac50c263540e328fe8916a7f25bffa5467ff
+  data.tar.gz: 9a32f412c9a768c1ab0998e4b781bc49ef5e402c
 SHA512:
-  metadata.gz: !binary |-
-    ZmZiMGRjYjAwYjBlOTZhMzk0NjNkMDAwYWUyNmUxZjM2Njk2OWYzYmI4YjU5
-    YzM1OWY5MmE4YzE3ZmNiYjE5ZWMyZTkzMTkwMDEzY2RlODdlYzI5ZGNmMWI2
-    ZmFkY2Q0OTM1YTU1OGRkMDY4YjY3NDViMzYxM2QxNzBiZTA1MjE=
-  data.tar.gz: !binary |-
-    ZGM1MTdhNjFkN2Q1Y2JjMTFkOTFmYTU3MDRlN2IxNjYxZmIzOTY0ZjliOWIx
-    OGM1OTA3M2Q4ZDkzMDM4YmYxZWQ5ODc5NTY0ZTY5ZmRlZmRiMmMwNjQ3MmUz
-    YjU2NjhhNWFmMzc0NzEwM2VlNGZlOGFjOGE0OWUwN2FmY2RmMTY=
+  metadata.gz: 8b402ec8a2299c24c3da2e3f562dc4b5031599f6fc91bb512a142f5856949e1b4e58d0538fd8cd099c264450bb6a55f969b773b491e463c398795cce7f44dd06
+  data.tar.gz: 77d825297e821ecf131ade9162d3221317e0c5cdb5fa1d9bbb749d40ea359fe3de0230165808e132e6efb77a6e533e16b41335dd6e592ba7d9bf06256197ade8

data/README.md

@@ -1,5 +1,6 @@
 # Jquery::Form::Validator::Rails
 
+Jquery-form-validator-rails gem is based on Victor Jonsson's jQuery plugin: https://github.com/victorjonsson/jQuery-Form-Validator
 
 ## Installation
 
@@ -21,7 +22,29 @@ Add the following to your `app/assets/javascripts/application.js`:
 
     //= require jquery.form-validator
 
-### Add modules:
+
+### Easy example
+
+Example how to add Jquery Form Validator to FormHelper `text_field`:
+
+    <div class="controls">
+      <%= f.text_field(:example, class: "field", data: {
+          :validation => "required validate_max_length length50",
+          "validation-error-msg" => "This field is required and cannot be longer than 50 characters."
+        }) %>
+    </div>
+
+Then add following to your `app/assets/javascripts/application.js`
+
+    <script>
+      $(document).ready(function() {
+        $.validate();
+      });
+    </script>
+
+Other configuration options can be seen here: http://formvalidator.net/#configuration
+
+### Added modules:
 
 * security
 * date
@@ -30,7 +53,7 @@ Add the following to your `app/assets/javascripts/application.js`:
 * sweden
 * uk
 
-Read the documentation for the modules at http://formvalidator.net
+The following code shows you how to load the module.
 
     <script>
       $.validate({
@@ -38,14 +61,19 @@ Read the documentation for the modules at http://formvalidator.net
       });
     </script>
 
+Read the documentation for the modules at http://formvalidator.net
+
 ## Changes
 
 See [CHANGELOG.md](CHANGELOG.md) in this repository for detailed changes.
 
 ## Contributing makes this repo happy!
 
+Please just hop in and help out! :smile:
+
 1. Fork it
 2. Create your feature branch (`git checkout -b my-new-feature`)
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
+

data/app/assets/javascripts/date.dev.js

@@ -0,0 +1,81 @@
+/**
+ * jQuery Form Validator Module: Date
+ * ------------------------------------------
+ * Created by Victor Jonsson <http://www.victorjonsson.se>
+ * Documentation and issue tracking on Github <https://github.com/victorjonsson/jQuery-Form-Validator/>
+ *
+ * The following validators will be added by this module:
+ *  - Time (HH:mmm)
+ *  - Birth date
+ *
+ * @website http://formvalidator.net/#location-validators
+ * @license Dual licensed under the MIT or GPL Version 2 licenses
+ * @version 2.2.beta.50
+ */
+(function($) {
+
+    /*
+     * Validate time hh:mm
+     */
+    $.formUtils.addValidator({
+        name : 'time',
+        validatorFunction : function(time) {
+            if (time.match(/^(\d{2}):(\d{2})$/) === null) {
+                return false;
+            } else {
+                var hours = parseInt(time.split(':')[0],10);
+                var minutes = parseInt(time.split(':')[1],10);
+                if( hours > 23 || minutes > 59 ) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        errorMessage : '',
+        errorMessageKey: 'badTime'
+    });
+
+    /*
+     * Is this a valid birth date
+     */
+    $.formUtils.addValidator({
+        name : 'birthdate',
+        validatorFunction : function(val, $el, conf) {
+            var dateFormat = 'yyyy-mm-dd';
+            if($el.valAttr('format')) {
+                dateFormat = $el.valAttr('format');
+            }
+            else if(typeof conf.dateFormat != 'undefined') {
+                dateFormat = conf.dateFormat;
+            }
+
+            var inputDate = $.formUtils.parseDate(val, dateFormat);
+            if (!inputDate) {
+                return false;
+            }
+
+            var d = new Date();
+            var currentYear = d.getFullYear();
+            var year = inputDate[0];
+            var month = inputDate[1];
+            var day = inputDate[2];
+
+            if (year === currentYear) {
+                var currentMonth = d.getMonth() + 1;
+                if (month === currentMonth) {
+                    var currentDay = d.getDate();
+                    return day <= currentDay;
+                }
+                else {
+                    return month < currentMonth;
+                }
+            }
+            else {
+                return year < currentYear && year > (currentYear - 124); // we can not live for ever yet...
+            }
+        },
+        errorMessage : '',
+        errorMessageKey: 'badDate'
+    });
+
+})(jQuery);

data/app/assets/javascripts/file.dev.js

@@ -0,0 +1,195 @@
+/**
+ * jQuery Form Validator Module: File
+ * ------------------------------------------
+ * Created by Victor Jonsson <http://www.victorjonsson.se>
+ *
+ * The following validators will be added by this module:
+ *  - mime type
+ *  - file size
+ *  - file extension
+ *
+ * @website http://formvalidator.net/
+ * @license Dual licensed under the MIT or GPL Version 2 licenses
+ * @version 2.2.beta.50
+ */
+(function($, window) {
+
+    'use strict';
+
+    var SUPPORTS_FILE_READER = typeof window.FileReader != 'undefined',
+
+        /**
+         * @return {Array}
+         */
+            _getTypes = function($input) {
+            var allowedTypes = $.split( ($input.valAttr('allowing') || '').toLowerCase() );
+
+            if( $.inArray('jpg', allowedTypes) > -1 && $.inArray('jpeg', allowedTypes) == -1)
+                allowedTypes.push('jpeg');
+            else if( $.inArray('jpeg', allowedTypes) > -1 && $.inArray('jpg', allowedTypes) == -1)
+                allowedTypes.push('jpg');
+            return allowedTypes;
+        },
+
+        /**
+         * @param {Object} obj
+         * @param {String} key
+         * @param {String} insert
+         * @param {Object} lang
+         */
+            _generateErrorMsg = function(obj, key, insert, lang) {
+            var msg = lang[key];
+            obj.errorMessageKey = ''; // only use message attached to this object
+            obj.errorMessage = msg.replace('\%s', insert);
+        },
+
+        /**
+         * @param {String} msg
+         */
+            _log = function(msg) {
+            if( window.console && window.console.log ) {
+                window.console.log(msg);
+            }
+        };
+
+    /*
+     * Validate mime type (falls back on validate_extension in older browsers)
+     */
+    $.formUtils.addValidator({
+        name : 'mime',
+        validatorFunction : function(str, $input, conf, language) {
+
+            if( SUPPORTS_FILE_READER ) {
+                var valid = true,
+                    files = $input.get(0).files || [],
+                    mime = '',
+                    allowedTypes = _getTypes($input);
+
+                if( files.length ) {
+                    $.each(files, function(i, file) {
+                        valid = false;
+                        mime = file.type || '';
+                        $.each(allowedTypes, function(j, type) {
+                            valid = mime.indexOf(type) > -1;
+                            if( valid ) {
+                                return false;
+                            }
+                        });
+                        return valid;
+                    });
+
+                    if( !valid ) {
+                        _log('Trying to upload a file with mime type '+mime+' which is not allowed');
+                        _generateErrorMsg(this, 'wrongFileType', allowedTypes.join(', '), language);
+                    }
+                }
+
+                return valid;
+
+            } else {
+                _log('FileReader not supported by browser, will check file extension');
+                return $.formUtils.validators.validate_extension.validatorFunction(str, $input);
+            }
+        },
+        errorMessage : '',
+        errorMessageKey: 'wrongFileType'
+    });
+
+    /**
+     * Validate file extension
+     */
+    $.formUtils.addValidator({
+        name : 'extension',
+        validatorFunction : function(value, $input, conf, language) {
+            var valid = true,
+                _this = this,
+                allowedTypes = _getTypes($input);
+
+            $.each($input.get(0).files || [value], function(i, file) {
+                var val = typeof file == 'string' ? file : (file.value || file.fileName || file.name),
+                    ext = val.substr( val.lastIndexOf('.')+1 );
+
+                if( $.inArray(ext.toLowerCase(), allowedTypes) == -1 ) {
+                    valid = false;
+                    _generateErrorMsg(_this, 'wrongFileType', allowedTypes.join(', '), language);
+                    return false;
+                }
+            });
+            return valid;
+        },
+        errorMessage : '',
+        errorMessageKey: 'wrongFileType'
+    });
+
+    /**
+     * Validate file size
+     */
+    $.formUtils.addValidator({
+        name : 'size',
+        validatorFunction : function(val, $input, conf, language) {
+            var maxSize = $input.valAttr('max-size');
+            if( !maxSize ) {
+                _log('Input "'+$input.attr('name')+'" is missing data-validation-max-size attribute');
+                return true;
+            } else if( !SUPPORTS_FILE_READER ) {
+                return true; // no fallback available
+            }
+
+            var maxBytes = $.formUtils.convertSizeNameToBytes(maxSize),
+                valid = true;
+
+            $.each($input.get(0).files || [], function(i, file) {
+                valid = file.size <= maxBytes;
+                return valid;
+            });
+
+            if( !valid ) {
+                _generateErrorMsg(this, 'wrongFileSize', maxSize, language);
+            }
+            return valid;
+        },
+        errorMessage : '',
+        errorMessageKey: 'wrongFileSize'
+    });
+
+    /**
+     * Make this function accessible via formUtils for unit tests
+     * @param {String} sizeName
+     * @return {Number}
+     */
+    $.formUtils.convertSizeNameToBytes = function(sizeName) {
+        sizeName = sizeName.toUpperCase();
+        if( sizeName.substr(sizeName.length-1, 1) == 'M' ) {
+            return parseInt(sizeName.substr(0, sizeName.length-1), 10) * 1024 * 1024;
+        } else if( sizeName.substr(sizeName.length-2, 2) == 'MB' ) {
+            return parseInt(sizeName.substr(0, sizeName.length-2), 10) * 1024 * 1024;
+        } else if( sizeName.substr(sizeName.length-2, 2) == 'KB' ) {
+            return parseInt(sizeName.substr(0, sizeName.length-2), 10) * 1024;
+        } else if( sizeName.substr(sizeName.length-1, 1) == 'B' ) {
+            return parseInt(sizeName.substr(0, sizeName.length-1), 10);
+        } else {
+            return parseInt(sizeName, 10);
+        }
+    };
+
+    /*
+     * This event listener will remove error messages for file
+     * inputs when file changes
+     */
+    $(window).one('validatorsLoaded formValidationSetup', function(evt, $form) {
+        var $inputs;
+        if( $form ) {
+            $inputs = $form.find('input[type="file"]');
+        } else {
+            $inputs = $('input[type="file"]');
+        }
+
+        $inputs.filter('*[data-validation]').bind('change', function() {
+            $(this)
+                .removeClass('error')
+                .parent()
+                .find('.form-error').remove();
+        });
+    });
+
+})(jQuery, window);

data/app/assets/javascripts/file.js

@@ -1 +1 @@
-(function($,window){var SUPPORTS_FILE_READER=typeof window.FileReader!="undefined",_getTypes=function($input){var allowedTypes=$.split(($input.valAttr("allowing")||"").toLowerCase());if($.inArray("jpg",allowedTypes)>-1&&$.inArray("jpeg",allowedTypes)==-1)allowedTypes.push("jpeg");else if($.inArray("jpeg",allowedTypes)>-1&&$.inArray("jpg",allowedTypes)==-1)allowedTypes.push("jpg");return allowedTypes};$.formUtils.addValidator({name:"mime",validatorFunction:function(str,$input){var files=$input.get(0).files||[];if(SUPPORTS_FILE_READER){var valid=true,mime="",allowedTypes=_getTypes($input);$.each(files,function(i,file){valid=false;mime=file.type||"";$.each(allowedTypes,function(j,type){valid=mime.indexOf(type)>-1;if(valid){return false}});return valid});return valid}else{return $.formUtils.validators.validate_extension.validatorFunction(str,$input)}},errorMessage:"The file you are trying to upload is of wrong type",errorMessageKey:"wrongFileType"});$.formUtils.addValidator({name:"extension",validatorFunction:function(value,$input){var valid=true,types=_getTypes($input);$.each($input.get(0).files||[],function(i,file){var val=file.value,ext=val.substr(val.lastIndexOf(".")+1);if($.inArray(ext.toLowerCase(),types)==-1){valid=false;return false}});return valid},errorMessage:"The file you are trying to upload is of wrong type",errorMessageKey:"wrongFileType"});$.formUtils.addValidator({name:"size",validatorFunction:function(val,$input){var maxSize=$input.valAttr("max-size");if(!maxSize){console.log('Input "'+$input.attr("name")+'" is missing data-validation-max-size attribute');return true}else if(!SUPPORTS_FILE_READER){return true}var maxBytes=$.formUtils.convertSizeNameToBytes(maxSize),valid=true;$.each($input.get(0).files||[],function(i,file){valid=file.size<=maxBytes;return valid});return valid},errorMessage:"The file you are trying to upload is too large",errorMessageKey:"wrongFileSize"});$.formUtils.convertSizeNameToBytes=function(sizeName){sizeName=sizeName.toUpperCase();if(sizeName.substr(sizeName.length-1,1)=="M"){return parseInt(sizeName.substr(0,sizeName.length-1),10)*1024*1024}else if(sizeName.substr(sizeName.length-2,2)=="MB"){return parseInt(sizeName.substr(0,sizeName.length-2),10)*1024*1024}else if(sizeName.substr(sizeName.length-2,2)=="KB"){return parseInt(sizeName.substr(0,sizeName.length-2),10)*1024}else if(sizeName.substr(sizeName.length-1,1)=="B"){return parseInt(sizeName.substr(0,sizeName.length-1),10)}else{return parseInt(sizeName,10)}};$(window).one("validatorsLoaded formValidationSetup",function(evt,$form){var $inputs;if($form){$inputs=$form.find('input[type="file"]')}else{$inputs=$('input[type="file"]')}$inputs.filter("*[data-validation]").bind("change",function(){$(this).removeClass("error").parent().find(".form-error").remove()})})})(jQuery,window);
+(function($,window){"use strict";var SUPPORTS_FILE_READER=typeof window.FileReader!="undefined",_getTypes=function($input){var allowedTypes=$.split(($input.valAttr("allowing")||"").toLowerCase());if($.inArray("jpg",allowedTypes)>-1&&$.inArray("jpeg",allowedTypes)==-1)allowedTypes.push("jpeg");else if($.inArray("jpeg",allowedTypes)>-1&&$.inArray("jpg",allowedTypes)==-1)allowedTypes.push("jpg");return allowedTypes},_generateErrorMsg=function(obj,key,insert,lang){var msg=lang[key];obj.errorMessageKey="";obj.errorMessage=msg.replace("%s",insert)},_log=function(msg){if(window.console&&window.console.log){window.console.log(msg)}};$.formUtils.addValidator({name:"mime",validatorFunction:function(str,$input,conf,language){if(SUPPORTS_FILE_READER){var valid=true,files=$input.get(0).files||[],mime="",allowedTypes=_getTypes($input);if(files.length){$.each(files,function(i,file){valid=false;mime=file.type||"";$.each(allowedTypes,function(j,type){valid=mime.indexOf(type)>-1;if(valid){return false}});return valid});if(!valid){_log("Trying to upload a file with mime type "+mime+" which is not allowed");_generateErrorMsg(this,"wrongFileType",allowedTypes.join(", "),language)}}return valid}else{_log("FileReader not supported by browser, will check file extension");return $.formUtils.validators.validate_extension.validatorFunction(str,$input)}},errorMessage:"",errorMessageKey:"wrongFileType"});$.formUtils.addValidator({name:"extension",validatorFunction:function(value,$input,conf,language){var valid=true,_this=this,allowedTypes=_getTypes($input);$.each($input.get(0).files||[value],function(i,file){var val=typeof file=="string"?file:file.value||file.fileName||file.name,ext=val.substr(val.lastIndexOf(".")+1);if($.inArray(ext.toLowerCase(),allowedTypes)==-1){valid=false;_generateErrorMsg(_this,"wrongFileType",allowedTypes.join(", "),language);return false}});return valid},errorMessage:"",errorMessageKey:"wrongFileType"});$.formUtils.addValidator({name:"size",validatorFunction:function(val,$input,conf,language){var maxSize=$input.valAttr("max-size");if(!maxSize){_log('Input "'+$input.attr("name")+'" is missing data-validation-max-size attribute');return true}else if(!SUPPORTS_FILE_READER){return true}var maxBytes=$.formUtils.convertSizeNameToBytes(maxSize),valid=true;$.each($input.get(0).files||[],function(i,file){valid=file.size<=maxBytes;return valid});if(!valid){_generateErrorMsg(this,"wrongFileSize",maxSize,language)}return valid},errorMessage:"",errorMessageKey:"wrongFileSize"});$.formUtils.convertSizeNameToBytes=function(sizeName){sizeName=sizeName.toUpperCase();if(sizeName.substr(sizeName.length-1,1)=="M"){return parseInt(sizeName.substr(0,sizeName.length-1),10)*1024*1024}else if(sizeName.substr(sizeName.length-2,2)=="MB"){return parseInt(sizeName.substr(0,sizeName.length-2),10)*1024*1024}else if(sizeName.substr(sizeName.length-2,2)=="KB"){return parseInt(sizeName.substr(0,sizeName.length-2),10)*1024}else if(sizeName.substr(sizeName.length-1,1)=="B"){return parseInt(sizeName.substr(0,sizeName.length-1),10)}else{return parseInt(sizeName,10)}};$(window).one("validatorsLoaded formValidationSetup",function(evt,$form){var $inputs;if($form){$inputs=$form.find('input[type="file"]')}else{$inputs=$('input[type="file"]')}$inputs.filter("*[data-validation]").bind("change",function(){$(this).removeClass("error").parent().find(".form-error").remove()})})})(jQuery,window);

data/app/assets/javascripts/form-test.html

@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Form Test</title>
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" />
+    <style>
+
+        /* Form and inputs */
+        form {
+            width: 500px;
+            margin: 0 auto;
+            padding: 20px;
+            display: block;
+        }
+
+        input.form-control {
+            width: 375px;
+        }
+
+        button, input[type="submit"], .button {
+            margin-bottom: 8px;
+        }
+
+        /* While server is being requested */
+        form.validating-server-side {
+            background: #F2F2F2;
+        }
+
+        input.validating-server-side {
+            opacity: 0.5;
+            background: lightgoldenrodyellow;
+        }
+
+        /* modify inputs for password strength */
+        .password-strength input.form-control {
+            width: 375px;
+            margin-right: 4px;
+            display: inline;
+        }
+
+        .password-strength label {
+            display: block;
+        }
+
+        /* Checkboxes */
+        .form-group.check-boxes input {
+            margin-left: 10px;
+        }
+
+        span.help {
+            color: #999 !important;
+        }
+
+        /* Error container for form C */
+
+        #error-container div {
+            color: red;
+            line-height: 140%;
+        }
+
+        #error-container div:last-child {
+            padding-bottom: 10px;
+        }
+
+    </style>
+</head>
+<body>
+<div>
+    <form action="" id="form-a" role="form">
+        <div class="form-group">
+            <label class="control-label" for="inline-suggestions">Inline suggestions</label>
+            <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Hound, Fox, Tiger, Elephant" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label" for="country-suggestions">Country suggestions</label>
+            <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
+            <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Year</label>
+            <input name="birth" class="form-control"
+                   data-validation="date"
+                   data-validation-format="yyyy/mm/dd"
+                   data-suggestions="2014/01/15,2014/01/16,2014/01/17" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Datepicker</label>
+            <input name="birth2" class="form-control"
+                   data-validation="date"
+                   data-validation-format="mm/dd/yyyy"
+                   id="datepicker" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Number 0-10 (accepting floats with comma)</label>
+            <input name="floats" class="form-control"
+                   data-validation="number"
+                   data-validation-allowing="range[0;10], float"
+                   data-validation-decimal-separator=","
+                    />
+        </div>
+
+        <div class="form-group password-strength">
+            <label class="control-label" for="password">Display password strength (only strong)</label>
+            <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Alphanumeric and -_ and spaces</label>
+            <input name="alphanumeric with spaces" class="form-control" name="test" data-validation="alphanumeric" data-validation-allowing="-_ " />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Alphanumeric only</label>
+            <input name="aplhanumeric only" class="form-control" name="test2" data-validation="alphanumeric" />
+        </div>
+
+        <div class="checkbox form-group">
+            <label>
+                <input name="checkbox" type="checkbox" data-validation="required" /> Must be checked
+            </label>
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Must choose one</label>
+            <br />
+            <input name="radio" type="radio" data-validation="required" value="1" /> A
+            <input name="radio" type="radio" value="1" /> B
+            <input name="radio" type="radio" value="1" /> C
+            <input name="radio" type="radio" value="1" /> D
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Even numbers only</label>
+            <input name="even numbers" class="form-control" name="test4" data-validation="even_number" />
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Make a choice</label>
+            <br />
+            <select name="choice" data-validation="required" data-validation-error-msg="Please make a choice">
+                <option value="">- - Choose - -</option>
+                <option>A</option>
+                <option>B</option>
+                <option>C</option>
+                <option>D</option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label class="control-label">Text</label>
+            (<span id="max-len">20</span> chars left)<br />
+            <textarea id="text-area" class="form-control" name="some-text"></textarea>
+        </div>
+        <div class="form-group">
+            <label class="control-label">Server validation</label>
+            <input class="form-control" name="code" value="secret"
+                   data-validation-helssp="The word is &quot;secret&quot;"
+                   data-validation="server"
+                   data-validation-url="http://formvalidator.net/validate-email.php" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">File validation</label>
+            <input type="file" name="some-file1" class="form-control"
+                   data-validation="size mime required"
+                   data-validation-error-msg-size="The file cant be larger than 400kb"
+                   data-validation-error-msg="You must upload an image file (max 400 kb)"
+                   data-validation-allowing="jpg, png, ico"
+                   data-validation-max-size="400kb" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">File name</label>
+            <input type="text" name="some-file2" class="form-control"
+                   data-validation="extension required"
+                   data-validation-error-msg="You must write a file name with extension jpg|png|ico"
+                   data-validation-allowing="jpg, png, ico"
+                    />
+        </div>
+        <div class="form-group">
+            <label class="control-label">
+                Callback validation, set this value to &quot;1&quot; and
+                validation will fail
+            </label>
+            <input id="callback" class="form-control" />
+        </div>
+
+        <div class="form-group check-boxes">
+            <label>Checkbox group</label><br />
+            <label>
+                <input type="checkbox" name="box" value="1"
+                       data-validation="checkbox_group"
+                       data-validation-qty="1-2" /> 1
+            </label>
+            <label>
+                <input type="checkbox" name="box" value="2" /> 2
+            </label>
+            <label>
+                <input type="checkbox" name="box" value="3" /> 3
+            </label>
+            <label>
+                <input type="checkbox" name="box" value="4" /> 4
+            </label>
+            <label>
+                <input type="checkbox" name="box" value="5" /> 5
+            </label>
+        </div>
+
+        <p style="line-height: 200%">
+            <input type="submit" class="button">
+            <br />
+            <button class="button" type="button"
+                    onclick="alert('Form a is ' + ( $('#form-a').isValid({}, {}, false) ? 'VALID':'NOT VALID'));">
+                Test validation via js (<strong>without error messages</strong>)
+            </button>
+            <br />
+            <button class="button" type="button"
+                    onclick="alert('Form a is ' + ( $('#form-a').isValid() ? 'VALID':'NOT VALID'));">
+                Test validation via js (showing error messages)
+            </button>
+            <br />
+            <input type="reset" class="button">
+        </p>
+    </form>
+    <hr />
+    <form id="form-b">
+        <div class="form-group">
+            <label class="control-label">Test</label>
+            <input name="test" data-validation="number" type="text" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">Password</label>
+            <input name="pass" data-validation="confirmation" type="password" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">Password again</label>
+            <input name="pass_confirmation" type="password" />
+        </div>
+        <p>
+            <input type="submit" class="button">
+            <input type="reset" class="button">
+        </p>
+    </form>
+    <hr />
+    <form id="form-c">
+        <div class="form-group">
+            <label class="control-label">Country</label>
+            <input name="test" data-validation="country" data-validation-error-msg="No valid country given" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">E-mail</label>
+            <input name="testmail" data-validation="email" data-validation-error-msg="E-mail is not valid" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">Confirm e-mail</label>
+            <input name="test" data-validation="confirmation" data-validation-confirm="testmail" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label>
+            <input name="test2"
+                    data-validation="alphanumeric"
+                    data-validation-error-msg="Invalid..."
+                    data-validation-if-checked="checker" />
+            <br />
+            <input type="checkbox" name="checker" />
+        </div>
+        <div id="error-container">
+
+        </div>
+        <p>
+            <input type="submit" class="button">
+            <input type="reset" class="button">
+        </p>
+    </form>
+    <hr />
+    <form id="form-d">
+        <h2>HTML5 attributes</h2>
+        <div class="form-group">
+            <label class="control-label">type="email"</label>
+            <input type="text" required="required" list="mejl" />
+            <datalist id="mejl">
+                <option value="Test">Test</option>
+                <option value="test2">test2</option>
+                <option value="test3">test3</option>
+            </datalist>
+        </div>
+        <div class="form-group">
+            <label class="control-label">type="url" (optional)</label>
+            <input type="url" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">type="number"</label>
+            <input type="number" required="required" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">type="number"</label>
+            <input type="number" required="required" maxlength="30" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">type="number" range[-5;5]</label>
+            <input type="number" min="-5" max="5" required="required" />
+        </div>
+        <div class="form-group">
+            <label class="control-label">pattern="^([a-z]+)$"</label>
+            <input type="text" name="some-colorz" list="some-colorz" pattern="^([a-z]+)$" required="required" />
+            <datalist id="some-colorz" style="display: none">
+                <option value="Green">Green</option>
+                <option value="Blue">Blue</option>
+                <option value="Red">Red</option>
+                <option value="Black">Black</option>
+                <option value="White">White</option>
+            </datalist>
+        </div>
+        <p>
+            <input type="submit" class="button">
+            <input type="reset" class="button">
+        </p>
+    </form>
+</div>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
+<script src="jquery.form-validator.js"></script>
+<script>
+(function($, window) {
+
+    var dev = '.dev'; //window.location.hash.indexOf('dev') > -1 ? '.dev' : '';
+
+    // setup datepicker
+    $("#datepicker").datepicker();
+
+    // Add a new validator
+    $.formUtils.addValidator({
+        name : 'even_number',
+        validatorFunction : function(value, $el, config, language, $form) {
+            return parseInt(value, 10) % 2 === 0;
+        },
+        borderColorOnError : '',
+        errorMessage : 'You have to give an even number',
+        errorMessageKey: 'badEvenNumber'
+    });
+
+    window.applyValidation = function(validateOnBlur, forms, messagePosition) {
+        if( !forms )
+            forms = 'form';
+        if( !messagePosition )
+            messagePosition = 'top';
+
+        $.validate({
+            form : forms,
+            language : {
+                requiredFields: 'Du måste bocka för denna'
+            },
+            validateOnBlur : validateOnBlur,
+            errorMessagePosition : messagePosition,
+            scrollToTopOnError : true,
+            borderColorOnError : 'purple',
+            modules : 'security'+dev+', location'+dev+', sweden'+dev+', html5'+dev+', file'+dev+', uk'+dev,
+            onModulesLoaded: function() {
+                $('#country-suggestions').suggestCountry();
+                $('#swedish-county-suggestions').suggestSwedishCounty();
+                $('#password').displayPasswordStrength();
+            },
+            onValidate : function($f) {
+
+                console.log('about to validate form '+$f.attr('id'));
+
+                var $callbackInput = $('#callback');
+                if( $callbackInput.val() == 1 ) {
+                    return {
+                        element : $callbackInput,
+                        message : 'This validation was made in a callback'
+                    };
+                }
+            },
+            onError : function($form) {
+                alert('Invalid '+$form.attr('id'));
+            },
+            onSuccess : function($form) {
+                alert('Valid '+$form.attr('id'));
+                return false;
+            }
+        });
+    };
+
+    $('#text-area').restrictLength($('#max-len'));
+
+    window.applyValidation(true, '#form-a', 'top');
+    window.applyValidation(false, '#form-b', 'element');
+    window.applyValidation(true, '#form-c', $('#error-container'));
+    window.applyValidation(true, '#form-d', 'element');
+
+    // Load one module outside $.validate() even though you do not have to
+    $.formUtils.loadModules('date'+dev+'.js', false, false);
+
+    $('input')
+        .on('beforeValidation', function() {
+            console.log('About to validate input "'+this.name+'"');
+        })
+        .on('validation', function(evt, isValid) {
+            var validationResult = '';
+            if( isValid === null ) {
+                validationResult = 'not validated';
+            } else if( isValid ) {
+                validationResult = 'VALID';
+            } else {
+                validationResult = 'INVALID';
+            }
+            console.log('Input '+this.name+' is '+validationResult);
+        });
+
+})(jQuery, window);
+</script>
+<body>
+</html>