Skip to content

Commit 8190814

Browse files
author
Matt Moore
committed
Add custom sanitizer functionality
Replicated the addValidator functionality in utils.js and then rewrote the existing sanitizers in santize.js to work in the new format. Also added an example custom sanitizer in form.html
1 parent 18150ec commit 8190814

File tree

3 files changed

+157
-63
lines changed

3 files changed

+157
-63
lines changed

‎src/main/utils.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
*/
4747
validators: {},
4848

49+
/**
50+
* Available sanitizers
51+
*/
52+
sanitizers: {},
53+
4954
/**
5055
* Events triggered by form validator
5156
*/
@@ -72,6 +77,14 @@
7277
this.validators[name] = validator;
7378
},
7479

80+
/**
81+
* Function for adding a sanitizer
82+
* @param {Object} sanitizer
83+
*/
84+
addSanitizer: function (sanitizer) {
85+
this.sanitizers[sanitizer.name] = sanitizer;
86+
},
87+
7588
/**
7689
* Warn user via the console if available
7790
*/

‎src/modules/sanitize.js‎

Lines changed: 113 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -28,70 +28,112 @@
2828

2929
'use strict';
3030

31-
$.formUtils.registerLoadedModule('sanitize');
32-
33-
var inputsThatCantBeSanitized = '[type="button"], [type="submit"], [type="radio"], [type="checkbox"], [type="reset"], [type="search"]',
34-
sanitizeCommands = {
35-
upper : function(val) {
36-
return val.toLocaleUpperCase();
37-
},
38-
lower : function(val) {
39-
return val.toLocaleLowerCase();
40-
},
41-
trim : function(val) {
42-
return $.trim(val);
43-
},
44-
trimLeft : function(val) {
45-
return val.replace(/^\s+/,'');
46-
},
47-
trimRight : function(val) {
48-
return val.replace(/\s+$/,'');
49-
},
50-
capitalize : function(val) {
51-
var words = val.split(' ');
31+
$.formUtils.addSanitizer({
32+
name : 'upper',
33+
sanitizerFunction : function(val) {
34+
return val.toLocaleUpperCase();
35+
}
36+
});
37+
38+
$.formUtils.addSanitizer({
39+
name : 'lower',
40+
sanitizerFunction : function(val) {
41+
return val.toLocaleLowerCase();
42+
}
43+
});
44+
45+
$.formUtils.addSanitizer({
46+
name : 'trim',
47+
sanitizerFunction : function(val) {
48+
return $.trim(val);
49+
}
50+
});
51+
52+
$.formUtils.addSanitizer({
53+
name : 'trimLeft',
54+
sanitizerFunction : function(val) {
55+
return val.replace(/^\s+/,'');
56+
}
57+
});
58+
59+
$.formUtils.addSanitizer({
60+
name : 'trimRight',
61+
sanitizerFunction : function(val) {
62+
return val.replace(/\s+$/,'');
63+
}
64+
});
65+
66+
$.formUtils.addSanitizer({
67+
name : 'capitalize',
68+
sanitizerFunction : function(val) {
69+
var words = val.split(' ');
5270
$.each(words, function(i, word) {
5371
words[i] = word.substr(0,1).toUpperCase() + word.substr(1, word.length);
5472
});
5573
return words.join(' ');
56-
},
57-
insert : function(val, $input, pos) {
74+
}
75+
});
76+
77+
$.formUtils.addSanitizer({
78+
name : 'insert',
79+
sanitizerFunction : function(val, $input, pos) {
5880
var extra = ($input.attr('data-sanitize-insert-'+pos) || '').replace(/\[SPACE\]/g, ' ');
5981
if ( (pos === 'left' && val.indexOf(extra) === 0) || (pos === 'right' && val.substring(val.length - extra.length) === extra)) {
6082
return val;
6183
}
6284
return (pos === 'left' ? extra:'') + val + (pos === 'right' ? extra : '');
63-
},
64-
insertRight : function(val, $input) {
65-
return this.insert(val, $input, 'right');
66-
},
67-
insertLeft : function(val, $input) {
68-
return this.insert(val, $input, 'left');
69-
},
70-
numberFormat : function(val, $input) {
71-
if (val.length === 0) {
72-
return val;
73-
}
74-
if ( 'numeral' in window ) {
75-
//If this has been previously formatted, it needs to be unformatted first before being reformatted.
76-
//Else numeral will fail
77-
val = numeral().unformat(val);
78-
val = numeral(val).format( $input.attr('data-sanitize-number-format') );
79-
}
80-
else {
81-
throw new ReferenceError('Using sanitation function "numberFormat" requires that you include numeral.js ' +
82-
'(http://numeraljs.com/)');
83-
}
84-
return val;
85-
},
86-
strip: function(val, $input) {
87-
var toRemove = $input.attr('data-sanitize-strip') || '';
88-
$.split(toRemove, function(char) {
89-
var regex = new RegExp($.isNumeric(char) ? char : '\\'+char, 'g');
90-
val = val.replace(regex, '');
91-
});
92-
return val;
93-
},
94-
escape : function(val, $input) {
85+
}
86+
});
87+
88+
$.formUtils.addSanitizer({
89+
name : 'insertRight',
90+
sanitizerFunction : function(val, $input) {
91+
return $.formUtils.sanitizers.insert.sanitizerFunction(val, $input, 'right');
92+
}
93+
});
94+
95+
$.formUtils.addSanitizer({
96+
name : 'insertLeft',
97+
sanitizerFunction : function(val, $input) {
98+
return $.formUtils.sanitizers.insert.sanitizerFunction(val, $input, 'left');
99+
}
100+
});
101+
102+
$.formUtils.addSanitizer({
103+
name : 'numberFormat',
104+
sanitizerFunction : function(val, $input) {
105+
if (val.length === 0) {
106+
return val;
107+
}
108+
if ( 'numeral' in window ) {
109+
//If this has been previously formatted, it needs to be unformatted first before being reformatted.
110+
//Else numeral will fail
111+
val = numeral().unformat(val);
112+
val = numeral(val).format( $input.attr('data-sanitize-number-format') );
113+
}
114+
else {
115+
throw new ReferenceError('Using sanitation function "numberFormat" requires that you include numeral.js ' +
116+
'(http://numeraljs.com/)');
117+
}
118+
return val;
119+
}
120+
});
121+
122+
$.formUtils.addSanitizer({
123+
name : 'strip',
124+
sanitizerFunction : function(val, $input) {
125+
var toRemove = $input.attr('data-sanitize-strip') || '';
126+
$.split(toRemove, function(char) {
127+
var regex = new RegExp($.isNumeric(char) ? char : '\\'+char, 'g');
128+
val = val.replace(regex, '');
129+
});
130+
return val;
131+
}
132+
});
133+
134+
$.formUtils.addSanitizer({
135+
name : 'escape',
136+
sanitizerFunction : function(val, $input) {
95137
var isEscaped = $input.valAttr('is-escaped'),
96138
entities = {
97139
'<' : '__%AMP%__lt;',
@@ -117,27 +159,35 @@
117159
});
118160

119161
return val.replace(new RegExp('__\%AMP\%__', 'g'), '&');
120-
}
121-
},
162+
}
163+
});
164+
165+
$.formUtils.registerLoadedModule('sanitize');
166+
167+
var inputsThatCantBeSanitized = '[type="button"], [type="submit"], [type="radio"], [type="checkbox"], [type="reset"], [type="search"]',
122168
setupSanitation = function(evt, $forms, config) {
123169

124170
if ( !$forms ) {
125171
$forms = $('form');
126172
}
127-
if ( !$forms.each ) {
173+
if ( !$forms.each ) {
128174
$forms = $($forms);
129175
}
130176

131177
var execSanitationCommands = function() {
178+
132179
var $input = $(this),
133180
value = $input.val();
134-
$.split($input.attr('data-sanitize'), function(command) {
135-
if ( command in sanitizeCommands ) {
136-
value = sanitizeCommands[command](value, $input, config);
137-
}
138-
else {
181+
$.split($input.attr('data-sanitize'), function(command) {
182+
183+
var sanitizer = $.formUtils.sanitizers[command];
184+
185+
if (sanitizer) {
186+
value = sanitizer.sanitizerFunction(value, $input, config);
187+
} else {
139188
throw new Error('Use of unknown sanitize command "'+command+'"');
140189
}
190+
141191
});
142192
$input
143193
.val(value)

‎test/form.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,10 @@ <h4>Validate on submit</h4>
275275
<input type="text" name="amount" data-validation="number" data-validation-allowing="float"
276276
data-sanitize="numberFormat" data-sanitize-number-format="0,0.0">
277277
</div>
278+
<div class="form-group">
279+
<label class="control-label">Proper Case (mcdonalds to McDonalds)</label>
280+
<input name="proper case" class="form-control" name="test3" data-sanitize="proper_case" />
281+
</div>
278282
<div class="form-group">
279283
<label class="control-label">Alphanumeric (will only be validated if checkbox below is checked)</label>
280284
<input name="test2"
@@ -407,6 +411,33 @@ <h2>Validation Module: Poland</h2>
407411
errorMessageKey: 'badEvenNumber',
408412
});
409413

414+
// UK Surname Proper Casing
415+
$.formUtils.addSanitizer({
416+
name : 'proper_case',
417+
sanitizerFunction : function(value) {
418+
value = value.toLocaleLowerCase();
419+
value = value.substring(0, 1).toUpperCase() + value.substring(1);
420+
intPointer = value.indexOf(' ');
421+
while (intPointer > -1) {
422+
value = value.substring(0, intPointer + 1) + value.substring(intPointer + 1, intPointer + 2).toUpperCase() + value.substring(intPointer + 2);
423+
intPointer = value.indexOf(' ', intPointer + 1);
424+
}
425+
intPointer = value.indexOf('-');
426+
if (intPointer > -1)
427+
value = value.substring(0, intPointer + 1) + value.substring(intPointer + 1, intPointer + 2).toUpperCase() + value.substring(intPointer + 2);
428+
intPointer = value.indexOf('O\'');
429+
if (intPointer > -1)
430+
value = value.substring(0, intPointer + 2) + value.substring(intPointer + 2, intPointer + 3).toUpperCase() + value.substring(intPointer + 3);
431+
intPointer = value.indexOf('Mc');
432+
if (intPointer > -1)
433+
value = value.substring(0, intPointer + 2) + value.substring(intPointer + 2, intPointer + 3).toUpperCase() + value.substring(intPointer + 3);
434+
intPointer = value.indexOf('Mac');
435+
if (intPointer > -1)
436+
value = value.substring(0, intPointer + 3) + value.substring(intPointer + 3, intPointer + 4).toUpperCase() + value.substring(intPointer + 4);
437+
return value;
438+
}
439+
});
440+
410441
window.applyValidation = function(validateOnBlur, forms, messagePosition, xtraModule) {
411442
if( !forms )
412443
forms = 'form';

0 commit comments

Comments
 (0)