Skip to content

Commit 00d6147

Browse files
victorjonssonvictorjonsson
committed
Finished off the html5 support
1 parent 163ed55 commit 00d6147

13 files changed

+147
-115
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ it calls jQ func **$.formUtils.validateInput** to validate the single input when
297297
#### 2.2.0 (unreleased)
298298
* Now possible to define an error message for each validation rule on a certain input (issue #113)
299299
* This plugin now serves as a html5 fallback. You can now use the native attributes to declare which type
300-
of validation that should be applied. (**Not yet implemented**)
300+
of validation that should be applied.
301301

302302

303303
#### 2.1.47

‎form-validator/date.dev.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*
1111
* @website http://formvalidator.net/#location-validators
1212
* @license Dual licensed under the MIT or GPL Version 2 licenses
13-
* @version 2.1.48
13+
* @version 2.1.50
1414
*/
1515
(function($) {
1616

‎form-validator/file.dev.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*
1111
* @website http://formvalidator.net/
1212
* @license Dual licensed under the MIT or GPL Version 2 licenses
13-
* @version 2.1.48
13+
* @version 2.1.50
1414
*/
1515
(function($, window) {
1616

@@ -137,8 +137,15 @@
137137
* This event listener will remove error messages for file
138138
* inputs when file changes
139139
*/
140-
$.formUtils.on('load', function() {
141-
$('input[type="file"]').filter('*[data-validation]').bind('change', function() {
140+
$(window).one('validatorsLoaded formValidationSetup', function(evt, $form) {
141+
var $inputs;
142+
if( $form ) {
143+
$inputs = $form.find('input[type="file"]');
144+
} else {
145+
$inputs = $('input[type="file"]');
146+
}
147+
148+
$inputs.filter('*[data-validation]').bind('change', function() {
142149
$(this)
143150
.removeClass('error')
144151
.parent()

‎form-validator/file.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎form-validator/form-test.html

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
</div>
9898

9999
<div class="form-group">
100-
<label class="control-label">Number 0-10 (accepting floats)</label>
100+
<label class="control-label">Number 0-10 (accepting floats with comma)</label>
101101
<input name="floats" class="form-control"
102102
data-validation="number"
103103
data-validation-allowing="range[0;10], float"
@@ -247,6 +247,34 @@
247247
<input type="reset" class="button">
248248
</p>
249249
</form>
250+
<hr />
251+
<form id="form-d">
252+
<h2>HTML5 attributes</h2>
253+
<div class="form-group">
254+
<label class="control-label">type="email"</label>
255+
<input type="email" required="required" />
256+
</div>
257+
<div class="form-group">
258+
<label class="control-label">type="url" (optional)</label>
259+
<input type="url" />
260+
</div>
261+
<div class="form-group">
262+
<label class="control-label">type="number"</label>
263+
<input type="number" required="required" />
264+
</div>
265+
<div class="form-group">
266+
<label class="control-label">type="number" range[-5;5]</label>
267+
<input type="number" min="-5" max="5" required="required" />
268+
</div>
269+
<div class="form-group">
270+
<label class="control-label">pattern="^([a-z]+)$"</label>
271+
<input type="text" pattern="^([a-z]+)$" required="required" />
272+
</div>
273+
<p>
274+
<input type="submit" class="button">
275+
<input type="reset" class="button">
276+
</p>
277+
</form>
250278
</div>
251279
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
252280
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
@@ -285,7 +313,7 @@
285313
errorMessagePosition : messagePosition,
286314
scrollToTopOnError : true,
287315
borderColorOnError : 'purple',
288-
modules : 'security'+dev+', location'+dev+', sweden'+dev+', file'+dev+', uk'+dev,
316+
modules : 'security'+dev+', location'+dev+', sweden'+dev+', html5'+dev+', file'+dev+', uk'+dev,
289317
onModulesLoaded: function() {
290318
$('#country-suggestions').suggestCountry();
291319
$('#swedish-county-suggestions').suggestSwedishCounty();
@@ -320,6 +348,7 @@
320348
window.applyValidation(true, '#form-a', 'top');
321349
window.applyValidation(false, '#form-b', 'element');
322350
window.applyValidation(true, '#form-c', $('#error-container'));
351+
window.applyValidation(true, '#form-d', 'element');
323352

324353
// Load one module outside $.validate() even though you do not have to
325354
$.formUtils.loadModules('date'+dev+'.js', false, false);

‎form-validator/html5.dev.js

Lines changed: 81 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -13,88 +13,102 @@
1313
*
1414
* @website http://formvalidator.net/
1515
* @license Dual licensed under the MIT or GPL Version 2 licenses
16-
* @version 2.1.48
16+
* @version 2.1.50
1717
*/
1818
(function($, window) {
1919

2020
"use strict";
2121

2222
var SUPPORTS_PLACEHOLDER = 'placeholder' in document.createElement('input');
2323

24+
$(window).bind('validatorsLoaded formValidationSetup', function(evt, $form) {
2425

25-
$(window).bind('formValidationSetup', function(evt, $form) {
26-
var $formInputs = $form.find('input,textarea,select');
27-
28-
$formInputs.each(function() {
29-
var validation = [],
30-
$input = $(this),
31-
attrs = {};
32-
33-
switch ( $input.attr('type').toLowerCase() ) {
34-
case 'url':
35-
validation.push('url');
36-
break;
37-
case 'email':
38-
validation.push('email');
39-
break;
40-
case 'number':
41-
validation.push('number');
42-
var max = $input.attr('max'),
43-
min = $input.attr('min');
44-
if( min || max ) {
45-
if( !min )
46-
min = 0;
47-
if( !max )
48-
max = 9007199254740992; // js max int
49-
50-
attrs['data-validation-allowing'] = 'range['+min+';'+max+']';
51-
if( min.indexOf('-') === 0 || max.indexOf('-') === 0 ) {
52-
attrs['data-validation-allowing'] += ',negative';
53-
}
54-
if( min.indexOf('.') > -1 || max.indexOf('.') > -1 ) {
55-
attrs['data-validation-allowing'] += ',float';
56-
}
57-
}
58-
break;
59-
}
26+
if( !$form ) {
27+
$form = $('form');
28+
}
6029

61-
if( validation.length == 0 && $input.attr('required') ) {
62-
validation.push('required');
63-
}
30+
$form.each(function() {
31+
var $f = $(this),
32+
$formInputs = $f.find('input,textarea,select'),
33+
foundHtml5Rule = false;
6434

65-
if( $input.attr('pattern') ) {
66-
validation.push('custom');
67-
attrs['data-validation-regexp'] = $input.attr('pattern');
68-
}
35+
$formInputs.each(function() {
36+
var validation = [],
37+
$input = $(this),
38+
isRequired = $input.attr('required'),
39+
attrs = {};
6940

70-
if( validation.length ) {
71-
$input.attr('data-validation', validation.join(' '));
72-
$.each(attrs, function(attrName, attrVal) {
73-
$input.attr(attrName, attrVal);
74-
});
75-
}
76-
});
41+
switch ( ($input.attr('type') || '').toLowerCase() ) {
42+
case 'url':
43+
validation.push('url');
44+
break;
45+
case 'email':
46+
validation.push('email');
47+
break;
48+
case 'number':
49+
validation.push('number');
50+
var max = $input.attr('max'),
51+
min = $input.attr('min');
52+
if( min || max ) {
53+
if( !min )
54+
min = 0;
55+
if( !max )
56+
max = 9007199254740992; // js max int
7757

78-
79-
if( !SUPPORTS_PLACEHOLDER ) {
80-
$formInputs.filter('input[placeholder]').each(function() {
81-
this.defaultValue = this.getAttribute('placeholder');
82-
$(this)
83-
.bind('focus', function() {
84-
if(this.value == this.defaultValue) {
85-
this.value = '';
86-
$(this).removeClass('showing-placeholder');
87-
}
88-
})
89-
.bind('blur', function() {
90-
if($.trim(this.value) == '') {
91-
this.value = this.defaultValue;
92-
$(this).addClass('showing-placeholder');
58+
attrs['data-validation-allowing'] = 'range['+min+';'+max+']';
59+
if( min.indexOf('-') === 0 || max.indexOf('-') === 0 ) {
60+
attrs['data-validation-allowing'] += ',negative';
61+
}
62+
if( min.indexOf('.') > -1 || max.indexOf('.') > -1 ) {
63+
attrs['data-validation-allowing'] += ',float';
64+
}
9365
}
66+
break;
67+
}
68+
69+
if( validation.length && !isRequired ) {
70+
attrs['data-validation-optional'] = 'true';
71+
}
72+
73+
if( $input.attr('pattern') ) {
74+
validation.push('custom');
75+
attrs['data-validation-regexp'] = $input.attr('pattern');
76+
}
77+
78+
if( validation.length ) {
79+
foundHtml5Rule = true;
80+
$input.attr('data-validation', validation.join(' '));
81+
82+
$.each(attrs, function(attrName, attrVal) {
83+
$input.attr(attrName, attrVal);
9484
});
85+
}
9586
});
96-
}
9787

88+
if( foundHtml5Rule ) {
89+
$f.trigger('html5ValidationAttrsFound');
90+
}
91+
92+
if( !SUPPORTS_PLACEHOLDER ) {
93+
$formInputs.filter('input[placeholder]').each(function() {
94+
this.defaultValue = this.getAttribute('placeholder');
95+
$(this)
96+
.bind('focus', function() {
97+
if(this.value == this.defaultValue) {
98+
this.value = '';
99+
$(this).removeClass('showing-placeholder');
100+
}
101+
})
102+
.bind('blur', function() {
103+
if($.trim(this.value) == '') {
104+
this.value = this.defaultValue;
105+
$(this).addClass('showing-placeholder');
106+
}
107+
});
108+
});
109+
}
110+
111+
});
98112
});
99113

100-
});
114+
})(jQuery, window);

‎form-validator/html5.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)