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 +5 -13
- data/README.md +30 -2
- data/app/assets/javascripts/date.dev.js +81 -0
- data/app/assets/javascripts/file.dev.js +195 -0
- data/app/assets/javascripts/file.js +1 -1
- data/app/assets/javascripts/form-test.html +422 -0
- data/app/assets/javascripts/html5.dev.js +144 -0
- data/app/assets/javascripts/html5.js +1 -1
- data/app/assets/javascripts/jquery.form-validator.js +229 -251
- data/app/assets/javascripts/jquery.form-validator.min.js +10 -0
- data/app/assets/javascripts/location.dev.js +78 -0
- data/app/assets/javascripts/qunit.html +635 -0
- data/app/assets/javascripts/security.dev.js +51 -24
- data/app/assets/javascripts/security.js +1 -1
- data/app/assets/javascripts/sweden.dev.js +1 -1
- data/app/assets/javascripts/uk.dev.js +1 -1
- data/lib/jquery/form/validator/rails/version.rb +1 -1
- metadata +21 -14
checksums.yaml
CHANGED
@@ -1,15 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
|
5
|
-
data.tar.gz: !binary |-
|
6
|
-
MzFlZDVkOWZhY2FlNzczZTk1NDkzNjcyMGRiMGVlMDc5NmE4M2Y4Ng==
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: eaddac50c263540e328fe8916a7f25bffa5467ff
|
4
|
+
data.tar.gz: 9a32f412c9a768c1ab0998e4b781bc49ef5e402c
|
7
5
|
SHA512:
|
8
|
-
metadata.gz:
|
9
|
-
|
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
|
-
|
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
|
-
|
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||[]
|
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 "secret""
|
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 "1" 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>
|