jquery-form-validator-rails 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,15 +1,7 @@
1
1
  ---
2
- !binary "U0hBMQ==":
3
- metadata.gz: !binary |-
4
- OTQwOGFiMjk2MTYwNGE2NGQxNzdmNDVlYWUyNGZiNDFkNjJjNzA2Yw==
5
- data.tar.gz: !binary |-
6
- MzFlZDVkOWZhY2FlNzczZTk1NDkzNjcyMGRiMGVlMDc5NmE4M2Y4Ng==
2
+ SHA1:
3
+ metadata.gz: eaddac50c263540e328fe8916a7f25bffa5467ff
4
+ data.tar.gz: 9a32f412c9a768c1ab0998e4b781bc49ef5e402c
7
5
  SHA512:
8
- metadata.gz: !binary |-
9
- ZmZiMGRjYjAwYjBlOTZhMzk0NjNkMDAwYWUyNmUxZjM2Njk2OWYzYmI4YjU5
10
- YzM1OWY5MmE4YzE3ZmNiYjE5ZWMyZTkzMTkwMDEzY2RlODdlYzI5ZGNmMWI2
11
- ZmFkY2Q0OTM1YTU1OGRkMDY4YjY3NDViMzYxM2QxNzBiZTA1MjE=
12
- data.tar.gz: !binary |-
13
- ZGM1MTdhNjFkN2Q1Y2JjMTFkOTFmYTU3MDRlN2IxNjYxZmIzOTY0ZjliOWIx
14
- OGM1OTA3M2Q4ZDkzMDM4YmYxZWQ5ODc5NTY0ZTY5ZmRlZmRiMmMwNjQ3MmUz
15
- YjU2NjhhNWFmMzc0NzEwM2VlNGZlOGFjOGE0OWUwN2FmY2RmMTY=
6
+ metadata.gz: 8b402ec8a2299c24c3da2e3f562dc4b5031599f6fc91bb512a142f5856949e1b4e58d0538fd8cd099c264450bb6a55f969b773b491e463c398795cce7f44dd06
7
+ data.tar.gz: 77d825297e821ecf131ade9162d3221317e0c5cdb5fa1d9bbb749d40ea359fe3de0230165808e132e6efb77a6e533e16b41335dd6e592ba7d9bf06256197ade8
data/README.md CHANGED
@@ -1,5 +1,6 @@
1
1
  # Jquery::Form::Validator::Rails
2
2
 
3
+ Jquery-form-validator-rails gem is based on Victor Jonsson's jQuery plugin: https://github.com/victorjonsson/jQuery-Form-Validator
3
4
 
4
5
  ## Installation
5
6
 
@@ -21,7 +22,29 @@ Add the following to your `app/assets/javascripts/application.js`:
21
22
 
22
23
  //= require jquery.form-validator
23
24
 
24
- ### Add modules:
25
+
26
+ ### Easy example
27
+
28
+ Example how to add Jquery Form Validator to FormHelper `text_field`:
29
+
30
+ <div class="controls">
31
+ <%= f.text_field(:example, class: "field", data: {
32
+ :validation => "required validate_max_length length50",
33
+ "validation-error-msg" => "This field is required and cannot be longer than 50 characters."
34
+ }) %>
35
+ </div>
36
+
37
+ Then add following to your `app/assets/javascripts/application.js`
38
+
39
+ <script>
40
+ $(document).ready(function() {
41
+ $.validate();
42
+ });
43
+ </script>
44
+
45
+ Other configuration options can be seen here: http://formvalidator.net/#configuration
46
+
47
+ ### Added modules:
25
48
 
26
49
  * security
27
50
  * date
@@ -30,7 +53,7 @@ Add the following to your `app/assets/javascripts/application.js`:
30
53
  * sweden
31
54
  * uk
32
55
 
33
- Read the documentation for the modules at http://formvalidator.net
56
+ The following code shows you how to load the module.
34
57
 
35
58
  <script>
36
59
  $.validate({
@@ -38,14 +61,19 @@ Read the documentation for the modules at http://formvalidator.net
38
61
  });
39
62
  </script>
40
63
 
64
+ Read the documentation for the modules at http://formvalidator.net
65
+
41
66
  ## Changes
42
67
 
43
68
  See [CHANGELOG.md](CHANGELOG.md) in this repository for detailed changes.
44
69
 
45
70
  ## Contributing makes this repo happy!
46
71
 
72
+ Please just hop in and help out! :smile:
73
+
47
74
  1. Fork it
48
75
  2. Create your feature branch (`git checkout -b my-new-feature`)
49
76
  3. Commit your changes (`git commit -am 'Add some feature'`)
50
77
  4. Push to the branch (`git push origin my-new-feature`)
51
78
  5. Create new Pull Request
79
+
@@ -0,0 +1,81 @@
1
+ /**
2
+ * jQuery Form Validator Module: Date
3
+ * ------------------------------------------
4
+ * Created by Victor Jonsson <http://www.victorjonsson.se>
5
+ * Documentation and issue tracking on Github <https://github.com/victorjonsson/jQuery-Form-Validator/>
6
+ *
7
+ * The following validators will be added by this module:
8
+ * - Time (HH:mmm)
9
+ * - Birth date
10
+ *
11
+ * @website http://formvalidator.net/#location-validators
12
+ * @license Dual licensed under the MIT or GPL Version 2 licenses
13
+ * @version 2.2.beta.50
14
+ */
15
+ (function($) {
16
+
17
+ /*
18
+ * Validate time hh:mm
19
+ */
20
+ $.formUtils.addValidator({
21
+ name : 'time',
22
+ validatorFunction : function(time) {
23
+ if (time.match(/^(\d{2}):(\d{2})$/) === null) {
24
+ return false;
25
+ } else {
26
+ var hours = parseInt(time.split(':')[0],10);
27
+ var minutes = parseInt(time.split(':')[1],10);
28
+ if( hours > 23 || minutes > 59 ) {
29
+ return false;
30
+ }
31
+ }
32
+ return true;
33
+ },
34
+ errorMessage : '',
35
+ errorMessageKey: 'badTime'
36
+ });
37
+
38
+ /*
39
+ * Is this a valid birth date
40
+ */
41
+ $.formUtils.addValidator({
42
+ name : 'birthdate',
43
+ validatorFunction : function(val, $el, conf) {
44
+ var dateFormat = 'yyyy-mm-dd';
45
+ if($el.valAttr('format')) {
46
+ dateFormat = $el.valAttr('format');
47
+ }
48
+ else if(typeof conf.dateFormat != 'undefined') {
49
+ dateFormat = conf.dateFormat;
50
+ }
51
+
52
+ var inputDate = $.formUtils.parseDate(val, dateFormat);
53
+ if (!inputDate) {
54
+ return false;
55
+ }
56
+
57
+ var d = new Date();
58
+ var currentYear = d.getFullYear();
59
+ var year = inputDate[0];
60
+ var month = inputDate[1];
61
+ var day = inputDate[2];
62
+
63
+ if (year === currentYear) {
64
+ var currentMonth = d.getMonth() + 1;
65
+ if (month === currentMonth) {
66
+ var currentDay = d.getDate();
67
+ return day <= currentDay;
68
+ }
69
+ else {
70
+ return month < currentMonth;
71
+ }
72
+ }
73
+ else {
74
+ return year < currentYear && year > (currentYear - 124); // we can not live for ever yet...
75
+ }
76
+ },
77
+ errorMessage : '',
78
+ errorMessageKey: 'badDate'
79
+ });
80
+
81
+ })(jQuery);
@@ -0,0 +1,195 @@
1
+ /**
2
+ * jQuery Form Validator Module: File
3
+ * ------------------------------------------
4
+ * Created by Victor Jonsson <http://www.victorjonsson.se>
5
+ *
6
+ * The following validators will be added by this module:
7
+ * - mime type
8
+ * - file size
9
+ * - file extension
10
+ *
11
+ * @website http://formvalidator.net/
12
+ * @license Dual licensed under the MIT or GPL Version 2 licenses
13
+ * @version 2.2.beta.50
14
+ */
15
+ (function($, window) {
16
+
17
+ 'use strict';
18
+
19
+ var SUPPORTS_FILE_READER = typeof window.FileReader != 'undefined',
20
+
21
+ /**
22
+ * @return {Array}
23
+ */
24
+ _getTypes = function($input) {
25
+ var allowedTypes = $.split( ($input.valAttr('allowing') || '').toLowerCase() );
26
+
27
+ if( $.inArray('jpg', allowedTypes) > -1 && $.inArray('jpeg', allowedTypes) == -1)
28
+ allowedTypes.push('jpeg');
29
+ else if( $.inArray('jpeg', allowedTypes) > -1 && $.inArray('jpg', allowedTypes) == -1)
30
+ allowedTypes.push('jpg');
31
+ return allowedTypes;
32
+ },
33
+
34
+ /**
35
+ * @param {Object} obj
36
+ * @param {String} key
37
+ * @param {String} insert
38
+ * @param {Object} lang
39
+ */
40
+ _generateErrorMsg = function(obj, key, insert, lang) {
41
+ var msg = lang[key];
42
+ obj.errorMessageKey = ''; // only use message attached to this object
43
+ obj.errorMessage = msg.replace('\%s', insert);
44
+ },
45
+
46
+ /**
47
+ * @param {String} msg
48
+ */
49
+ _log = function(msg) {
50
+ if( window.console && window.console.log ) {
51
+ window.console.log(msg);
52
+ }
53
+ };
54
+
55
+ /*
56
+ * Validate mime type (falls back on validate_extension in older browsers)
57
+ */
58
+ $.formUtils.addValidator({
59
+ name : 'mime',
60
+ validatorFunction : function(str, $input, conf, language) {
61
+
62
+ if( SUPPORTS_FILE_READER ) {
63
+ var valid = true,
64
+ files = $input.get(0).files || [],
65
+ mime = '',
66
+ allowedTypes = _getTypes($input);
67
+
68
+ if( files.length ) {
69
+ $.each(files, function(i, file) {
70
+ valid = false;
71
+ mime = file.type || '';
72
+ $.each(allowedTypes, function(j, type) {
73
+ valid = mime.indexOf(type) > -1;
74
+ if( valid ) {
75
+ return false;
76
+ }
77
+ });
78
+ return valid;
79
+ });
80
+
81
+ if( !valid ) {
82
+ _log('Trying to upload a file with mime type '+mime+' which is not allowed');
83
+ _generateErrorMsg(this, 'wrongFileType', allowedTypes.join(', '), language);
84
+ }
85
+ }
86
+
87
+ return valid;
88
+
89
+ } else {
90
+ _log('FileReader not supported by browser, will check file extension');
91
+ return $.formUtils.validators.validate_extension.validatorFunction(str, $input);
92
+ }
93
+ },
94
+ errorMessage : '',
95
+ errorMessageKey: 'wrongFileType'
96
+ });
97
+
98
+ /**
99
+ * Validate file extension
100
+ */
101
+ $.formUtils.addValidator({
102
+ name : 'extension',
103
+ validatorFunction : function(value, $input, conf, language) {
104
+ var valid = true,
105
+ _this = this,
106
+ allowedTypes = _getTypes($input);
107
+
108
+ $.each($input.get(0).files || [value], function(i, file) {
109
+ var val = typeof file == 'string' ? file : (file.value || file.fileName || file.name),
110
+ ext = val.substr( val.lastIndexOf('.')+1 );
111
+
112
+ if( $.inArray(ext.toLowerCase(), allowedTypes) == -1 ) {
113
+ valid = false;
114
+ _generateErrorMsg(_this, 'wrongFileType', allowedTypes.join(', '), language);
115
+ return false;
116
+ }
117
+ });
118
+ return valid;
119
+ },
120
+ errorMessage : '',
121
+ errorMessageKey: 'wrongFileType'
122
+ });
123
+
124
+ /**
125
+ * Validate file size
126
+ */
127
+ $.formUtils.addValidator({
128
+ name : 'size',
129
+ validatorFunction : function(val, $input, conf, language) {
130
+ var maxSize = $input.valAttr('max-size');
131
+ if( !maxSize ) {
132
+ _log('Input "'+$input.attr('name')+'" is missing data-validation-max-size attribute');
133
+ return true;
134
+ } else if( !SUPPORTS_FILE_READER ) {
135
+ return true; // no fallback available
136
+ }
137
+
138
+ var maxBytes = $.formUtils.convertSizeNameToBytes(maxSize),
139
+ valid = true;
140
+
141
+ $.each($input.get(0).files || [], function(i, file) {
142
+ valid = file.size <= maxBytes;
143
+ return valid;
144
+ });
145
+
146
+ if( !valid ) {
147
+ _generateErrorMsg(this, 'wrongFileSize', maxSize, language);
148
+ }
149
+ return valid;
150
+ },
151
+ errorMessage : '',
152
+ errorMessageKey: 'wrongFileSize'
153
+ });
154
+
155
+ /**
156
+ * Make this function accessible via formUtils for unit tests
157
+ * @param {String} sizeName
158
+ * @return {Number}
159
+ */
160
+ $.formUtils.convertSizeNameToBytes = function(sizeName) {
161
+ sizeName = sizeName.toUpperCase();
162
+ if( sizeName.substr(sizeName.length-1, 1) == 'M' ) {
163
+ return parseInt(sizeName.substr(0, sizeName.length-1), 10) * 1024 * 1024;
164
+ } else if( sizeName.substr(sizeName.length-2, 2) == 'MB' ) {
165
+ return parseInt(sizeName.substr(0, sizeName.length-2), 10) * 1024 * 1024;
166
+ } else if( sizeName.substr(sizeName.length-2, 2) == 'KB' ) {
167
+ return parseInt(sizeName.substr(0, sizeName.length-2), 10) * 1024;
168
+ } else if( sizeName.substr(sizeName.length-1, 1) == 'B' ) {
169
+ return parseInt(sizeName.substr(0, sizeName.length-1), 10);
170
+ } else {
171
+ return parseInt(sizeName, 10);
172
+ }
173
+ };
174
+
175
+ /*
176
+ * This event listener will remove error messages for file
177
+ * inputs when file changes
178
+ */
179
+ $(window).one('validatorsLoaded formValidationSetup', function(evt, $form) {
180
+ var $inputs;
181
+ if( $form ) {
182
+ $inputs = $form.find('input[type="file"]');
183
+ } else {
184
+ $inputs = $('input[type="file"]');
185
+ }
186
+
187
+ $inputs.filter('*[data-validation]').bind('change', function() {
188
+ $(this)
189
+ .removeClass('error')
190
+ .parent()
191
+ .find('.form-error').remove();
192
+ });
193
+ });
194
+
195
+ })(jQuery, window);
@@ -1 +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);
1
+ (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);
@@ -0,0 +1,422 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Form Test</title>
6
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" />
7
+ <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" />
8
+ <style>
9
+
10
+ /* Form and inputs */
11
+ form {
12
+ width: 500px;
13
+ margin: 0 auto;
14
+ padding: 20px;
15
+ display: block;
16
+ }
17
+
18
+ input.form-control {
19
+ width: 375px;
20
+ }
21
+
22
+ button, input[type="submit"], .button {
23
+ margin-bottom: 8px;
24
+ }
25
+
26
+ /* While server is being requested */
27
+ form.validating-server-side {
28
+ background: #F2F2F2;
29
+ }
30
+
31
+ input.validating-server-side {
32
+ opacity: 0.5;
33
+ background: lightgoldenrodyellow;
34
+ }
35
+
36
+ /* modify inputs for password strength */
37
+ .password-strength input.form-control {
38
+ width: 375px;
39
+ margin-right: 4px;
40
+ display: inline;
41
+ }
42
+
43
+ .password-strength label {
44
+ display: block;
45
+ }
46
+
47
+ /* Checkboxes */
48
+ .form-group.check-boxes input {
49
+ margin-left: 10px;
50
+ }
51
+
52
+ span.help {
53
+ color: #999 !important;
54
+ }
55
+
56
+ /* Error container for form C */
57
+
58
+ #error-container div {
59
+ color: red;
60
+ line-height: 140%;
61
+ }
62
+
63
+ #error-container div:last-child {
64
+ padding-bottom: 10px;
65
+ }
66
+
67
+ </style>
68
+ </head>
69
+ <body>
70
+ <div>
71
+ <form action="" id="form-a" role="form">
72
+ <div class="form-group">
73
+ <label class="control-label" for="inline-suggestions">Inline suggestions</label>
74
+ <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Hound, Fox, Tiger, Elephant" />
75
+ </div>
76
+
77
+ <div class="form-group">
78
+ <label class="control-label" for="country-suggestions">Country suggestions</label>
79
+ <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" />
80
+ </div>
81
+
82
+ <div class="form-group">
83
+ <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
84
+ <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" />
85
+ </div>
86
+
87
+ <div class="form-group">
88
+ <label class="control-label">Year</label>
89
+ <input name="birth" class="form-control"
90
+ data-validation="date"
91
+ data-validation-format="yyyy/mm/dd"
92
+ data-suggestions="2014/01/15,2014/01/16,2014/01/17" />
93
+ </div>
94
+
95
+ <div class="form-group">
96
+ <label class="control-label">Datepicker</label>
97
+ <input name="birth2" class="form-control"
98
+ data-validation="date"
99
+ data-validation-format="mm/dd/yyyy"
100
+ id="datepicker" />
101
+ </div>
102
+
103
+ <div class="form-group">
104
+ <label class="control-label">Number 0-10 (accepting floats with comma)</label>
105
+ <input name="floats" class="form-control"
106
+ data-validation="number"
107
+ data-validation-allowing="range[0;10], float"
108
+ data-validation-decimal-separator=","
109
+ />
110
+ </div>
111
+
112
+ <div class="form-group password-strength">
113
+ <label class="control-label" for="password">Display password strength (only strong)</label>
114
+ <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" />
115
+ </div>
116
+
117
+ <div class="form-group">
118
+ <label class="control-label">Alphanumeric and -_ and spaces</label>
119
+ <input name="alphanumeric with spaces" class="form-control" name="test" data-validation="alphanumeric" data-validation-allowing="-_ " />
120
+ </div>
121
+
122
+ <div class="form-group">
123
+ <label class="control-label">Alphanumeric only</label>
124
+ <input name="aplhanumeric only" class="form-control" name="test2" data-validation="alphanumeric" />
125
+ </div>
126
+
127
+ <div class="checkbox form-group">
128
+ <label>
129
+ <input name="checkbox" type="checkbox" data-validation="required" /> Must be checked
130
+ </label>
131
+ </div>
132
+
133
+ <div class="form-group">
134
+ <label class="control-label">Must choose one</label>
135
+ <br />
136
+ <input name="radio" type="radio" data-validation="required" value="1" /> A
137
+ <input name="radio" type="radio" value="1" /> B
138
+ <input name="radio" type="radio" value="1" /> C
139
+ <input name="radio" type="radio" value="1" /> D
140
+ </div>
141
+
142
+ <div class="form-group">
143
+ <label class="control-label">Even numbers only</label>
144
+ <input name="even numbers" class="form-control" name="test4" data-validation="even_number" />
145
+ </div>
146
+
147
+ <div class="form-group">
148
+ <label class="control-label">Make a choice</label>
149
+ <br />
150
+ <select name="choice" data-validation="required" data-validation-error-msg="Please make a choice">
151
+ <option value="">- - Choose - -</option>
152
+ <option>A</option>
153
+ <option>B</option>
154
+ <option>C</option>
155
+ <option>D</option>
156
+ </select>
157
+ </div>
158
+
159
+ <div class="form-group">
160
+ <label class="control-label">Text</label>
161
+ (<span id="max-len">20</span> chars left)<br />
162
+ <textarea id="text-area" class="form-control" name="some-text"></textarea>
163
+ </div>
164
+ <div class="form-group">
165
+ <label class="control-label">Server validation</label>
166
+ <input class="form-control" name="code" value="secret"
167
+ data-validation-helssp="The word is &quot;secret&quot;"
168
+ data-validation="server"
169
+ data-validation-url="http://formvalidator.net/validate-email.php" />
170
+ </div>
171
+ <div class="form-group">
172
+ <label class="control-label">File validation</label>
173
+ <input type="file" name="some-file1" class="form-control"
174
+ data-validation="size mime required"
175
+ data-validation-error-msg-size="The file cant be larger than 400kb"
176
+ data-validation-error-msg="You must upload an image file (max 400 kb)"
177
+ data-validation-allowing="jpg, png, ico"
178
+ data-validation-max-size="400kb" />
179
+ </div>
180
+ <div class="form-group">
181
+ <label class="control-label">File name</label>
182
+ <input type="text" name="some-file2" class="form-control"
183
+ data-validation="extension required"
184
+ data-validation-error-msg="You must write a file name with extension jpg|png|ico"
185
+ data-validation-allowing="jpg, png, ico"
186
+ />
187
+ </div>
188
+ <div class="form-group">
189
+ <label class="control-label">
190
+ Callback validation, set this value to &quot;1&quot; and
191
+ validation will fail
192
+ </label>
193
+ <input id="callback" class="form-control" />
194
+ </div>
195
+
196
+ <div class="form-group check-boxes">
197
+ <label>Checkbox group</label><br />
198
+ <label>
199
+ <input type="checkbox" name="box" value="1"
200
+ data-validation="checkbox_group"
201
+ data-validation-qty="1-2" /> 1
202
+ </label>
203
+ <label>
204
+ <input type="checkbox" name="box" value="2" /> 2
205
+ </label>
206
+ <label>
207
+ <input type="checkbox" name="box" value="3" /> 3
208
+ </label>
209
+ <label>
210
+ <input type="checkbox" name="box" value="4" /> 4
211
+ </label>
212
+ <label>
213
+ <input type="checkbox" name="box" value="5" /> 5
214
+ </label>
215
+ </div>
216
+
217
+ <p style="line-height: 200%">
218
+ <input type="submit" class="button">
219
+ <br />
220
+ <button class="button" type="button"
221
+ onclick="alert('Form a is ' + ( $('#form-a').isValid({}, {}, false) ? 'VALID':'NOT VALID'));">
222
+ Test validation via js (<strong>without error messages</strong>)
223
+ </button>
224
+ <br />
225
+ <button class="button" type="button"
226
+ onclick="alert('Form a is ' + ( $('#form-a').isValid() ? 'VALID':'NOT VALID'));">
227
+ Test validation via js (showing error messages)
228
+ </button>
229
+ <br />
230
+ <input type="reset" class="button">
231
+ </p>
232
+ </form>
233
+ <hr />
234
+ <form id="form-b">
235
+ <div class="form-group">
236
+ <label class="control-label">Test</label>
237
+ <input name="test" data-validation="number" type="text" />
238
+ </div>
239
+ <div class="form-group">
240
+ <label class="control-label">Password</label>
241
+ <input name="pass" data-validation="confirmation" type="password" />
242
+ </div>
243
+ <div class="form-group">
244
+ <label class="control-label">Password again</label>
245
+ <input name="pass_confirmation" type="password" />
246
+ </div>
247
+ <p>
248
+ <input type="submit" class="button">
249
+ <input type="reset" class="button">
250
+ </p>
251
+ </form>
252
+ <hr />
253
+ <form id="form-c">
254
+ <div class="form-group">
255
+ <label class="control-label">Country</label>
256
+ <input name="test" data-validation="country" data-validation-error-msg="No valid country given" />
257
+ </div>
258
+ <div class="form-group">
259
+ <label class="control-label">E-mail</label>
260
+ <input name="testmail" data-validation="email" data-validation-error-msg="E-mail is not valid" />
261
+ </div>
262
+ <div class="form-group">
263
+ <label class="control-label">Confirm e-mail</label>
264
+ <input name="test" data-validation="confirmation" data-validation-confirm="testmail" />
265
+ </div>
266
+ <div class="form-group">
267
+ <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label>
268
+ <input name="test2"
269
+ data-validation="alphanumeric"
270
+ data-validation-error-msg="Invalid..."
271
+ data-validation-if-checked="checker" />
272
+ <br />
273
+ <input type="checkbox" name="checker" />
274
+ </div>
275
+ <div id="error-container">
276
+
277
+ </div>
278
+ <p>
279
+ <input type="submit" class="button">
280
+ <input type="reset" class="button">
281
+ </p>
282
+ </form>
283
+ <hr />
284
+ <form id="form-d">
285
+ <h2>HTML5 attributes</h2>
286
+ <div class="form-group">
287
+ <label class="control-label">type="email"</label>
288
+ <input type="text" required="required" list="mejl" />
289
+ <datalist id="mejl">
290
+ <option value="Test">Test</option>
291
+ <option value="test2">test2</option>
292
+ <option value="test3">test3</option>
293
+ </datalist>
294
+ </div>
295
+ <div class="form-group">
296
+ <label class="control-label">type="url" (optional)</label>
297
+ <input type="url" />
298
+ </div>
299
+ <div class="form-group">
300
+ <label class="control-label">type="number"</label>
301
+ <input type="number" required="required" />
302
+ </div>
303
+ <div class="form-group">
304
+ <label class="control-label">type="number"</label>
305
+ <input type="number" required="required" maxlength="30" />
306
+ </div>
307
+ <div class="form-group">
308
+ <label class="control-label">type="number" range[-5;5]</label>
309
+ <input type="number" min="-5" max="5" required="required" />
310
+ </div>
311
+ <div class="form-group">
312
+ <label class="control-label">pattern="^([a-z]+)$"</label>
313
+ <input type="text" name="some-colorz" list="some-colorz" pattern="^([a-z]+)$" required="required" />
314
+ <datalist id="some-colorz" style="display: none">
315
+ <option value="Green">Green</option>
316
+ <option value="Blue">Blue</option>
317
+ <option value="Red">Red</option>
318
+ <option value="Black">Black</option>
319
+ <option value="White">White</option>
320
+ </datalist>
321
+ </div>
322
+ <p>
323
+ <input type="submit" class="button">
324
+ <input type="reset" class="button">
325
+ </p>
326
+ </form>
327
+ </div>
328
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
329
+ <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
330
+ <script src="jquery.form-validator.js"></script>
331
+ <script>
332
+ (function($, window) {
333
+
334
+ var dev = '.dev'; //window.location.hash.indexOf('dev') > -1 ? '.dev' : '';
335
+
336
+ // setup datepicker
337
+ $("#datepicker").datepicker();
338
+
339
+ // Add a new validator
340
+ $.formUtils.addValidator({
341
+ name : 'even_number',
342
+ validatorFunction : function(value, $el, config, language, $form) {
343
+ return parseInt(value, 10) % 2 === 0;
344
+ },
345
+ borderColorOnError : '',
346
+ errorMessage : 'You have to give an even number',
347
+ errorMessageKey: 'badEvenNumber'
348
+ });
349
+
350
+ window.applyValidation = function(validateOnBlur, forms, messagePosition) {
351
+ if( !forms )
352
+ forms = 'form';
353
+ if( !messagePosition )
354
+ messagePosition = 'top';
355
+
356
+ $.validate({
357
+ form : forms,
358
+ language : {
359
+ requiredFields: 'Du måste bocka för denna'
360
+ },
361
+ validateOnBlur : validateOnBlur,
362
+ errorMessagePosition : messagePosition,
363
+ scrollToTopOnError : true,
364
+ borderColorOnError : 'purple',
365
+ modules : 'security'+dev+', location'+dev+', sweden'+dev+', html5'+dev+', file'+dev+', uk'+dev,
366
+ onModulesLoaded: function() {
367
+ $('#country-suggestions').suggestCountry();
368
+ $('#swedish-county-suggestions').suggestSwedishCounty();
369
+ $('#password').displayPasswordStrength();
370
+ },
371
+ onValidate : function($f) {
372
+
373
+ console.log('about to validate form '+$f.attr('id'));
374
+
375
+ var $callbackInput = $('#callback');
376
+ if( $callbackInput.val() == 1 ) {
377
+ return {
378
+ element : $callbackInput,
379
+ message : 'This validation was made in a callback'
380
+ };
381
+ }
382
+ },
383
+ onError : function($form) {
384
+ alert('Invalid '+$form.attr('id'));
385
+ },
386
+ onSuccess : function($form) {
387
+ alert('Valid '+$form.attr('id'));
388
+ return false;
389
+ }
390
+ });
391
+ };
392
+
393
+ $('#text-area').restrictLength($('#max-len'));
394
+
395
+ window.applyValidation(true, '#form-a', 'top');
396
+ window.applyValidation(false, '#form-b', 'element');
397
+ window.applyValidation(true, '#form-c', $('#error-container'));
398
+ window.applyValidation(true, '#form-d', 'element');
399
+
400
+ // Load one module outside $.validate() even though you do not have to
401
+ $.formUtils.loadModules('date'+dev+'.js', false, false);
402
+
403
+ $('input')
404
+ .on('beforeValidation', function() {
405
+ console.log('About to validate input "'+this.name+'"');
406
+ })
407
+ .on('validation', function(evt, isValid) {
408
+ var validationResult = '';
409
+ if( isValid === null ) {
410
+ validationResult = 'not validated';
411
+ } else if( isValid ) {
412
+ validationResult = 'VALID';
413
+ } else {
414
+ validationResult = 'INVALID';
415
+ }
416
+ console.log('Input '+this.name+' is '+validationResult);
417
+ });
418
+
419
+ })(jQuery, window);
420
+ </script>
421
+ <body>
422
+ </html>