Skip to content

Commit 808c093

Browse files
victorjonssonvictorjonsson
authored
Merge pull request victorjonsson#632 from dszymczuk/add-color-validator
Add color validator
2 parents 4c4fdd2 + ee6767b commit 808c093

File tree

3 files changed

+526
-0
lines changed

3 files changed

+526
-0
lines changed

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,13 @@ Read the documentation for the UK module at [http://formvalidator.net/#uk-valida
147147
* **plpesel** - *validate polish personal identity number (in Polish identity cards)*
148148
* **plnip** - *validate polish VAT identification number*
149149
* **plregon** - *validate polish bussiness identity number*
150+
151+
### Module: color
152+
* **hex** - *validate hex color format*
153+
* **rgb** - *validate rgb color format*
154+
* **rgba** - *validate rgba color format*
155+
* **hsl** - *validate hsl color format*
156+
* **hsla** - *validate hsla color format*
150157

151158
### Module: sanitation
152159
* **trim**

‎form-validator/color.js

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
(function (root, factory) {
2+
if (typeof define === 'function' && define.amd) {
3+
// AMD. Register as an anonymous module unless amdModuleId is set
4+
define(["jquery"], function (a0) {
5+
return (factory(a0));
6+
});
7+
} else if (typeof module === 'object' && module.exports) {
8+
// Node. Does not work with strict CommonJS, but
9+
// only CommonJS-like environments that support module.exports,
10+
// like Node.
11+
module.exports = factory(require("jquery"));
12+
} else {
13+
factory(root["jQuery"]);
14+
}
15+
}(this, function (jQuery) {
16+
17+
/**
18+
* jQuery Form Validator Module: Color
19+
* ------------------------------------------
20+
* Created by dszymczuk <https://github.com/dszymczuk>
21+
*
22+
*
23+
* This form validation module adds validators for some color formats like: hex, rgb, rgba, hsl, hsla.
24+
* Also it allow to use transparent as color
25+
* This module adds the following validators:
26+
* - color
27+
*
28+
* @license MIT
29+
*/
30+
(function($) {
31+
32+
$.formUtils.registerLoadedModule('color');
33+
34+
/*
35+
HELPER FUNCTIONS
36+
*/
37+
var filterFloat = function(value) {
38+
if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
39+
.test(value)) {
40+
return Number(value);
41+
}
42+
43+
return NaN;
44+
};
45+
46+
var isBetween0and1 = function(value) {
47+
return value > 0 && value < 1;
48+
};
49+
50+
/**
51+
* Check HEX format
52+
*/
53+
$.formUtils.addValidator({
54+
name: 'hex',
55+
validatorFunction: function(val, $el) {
56+
if ($el.valAttr('allow-transparent') === 'true' && val === 'transparent') {
57+
return true;
58+
}
59+
60+
var startWithHex = val[0] === '#';
61+
if (!startWithHex) {
62+
return false;
63+
}
64+
65+
var isCorrectLength = val.length === 4 || val.length === 7;
66+
67+
if (isCorrectLength) {
68+
var regex = /[0-9a-f]/i;
69+
var valueSliced = val.slice(1).split('');
70+
var isValid = true;
71+
valueSliced.forEach(function(i) {
72+
if (i.match(regex) === null) {
73+
isValid = false;
74+
}
75+
});
76+
return isValid;
77+
}
78+
79+
return false;
80+
},
81+
errorMessage: '',
82+
errorMessageKey: 'badHex'
83+
});
84+
85+
/**
86+
* Check RGB format
87+
*/
88+
$.formUtils.addValidator({
89+
name: 'rgb',
90+
validatorFunction: function(val, $el) {
91+
if ($el.valAttr('allow-transparent') === 'true' && val === 'transparent') {
92+
return true;
93+
}
94+
95+
var removedSpace = val.replace(/ /g, '');
96+
var regex = /\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)/i;
97+
98+
if (removedSpace.match(regex)) {
99+
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
100+
var valueSliced = removeBrackets.split(',');
101+
var isValid = true;
102+
103+
valueSliced.forEach(function(i) {
104+
var parsedInt = parseInt(i);
105+
if ((Number.isInteger(parsedInt) && 0 <= parsedInt && parsedInt <= 255) === false) {
106+
isValid = false;
107+
}
108+
});
109+
return isValid;
110+
}
111+
112+
return false;
113+
},
114+
errorMessage: '',
115+
errorMessageKey: 'badRgb'
116+
});
117+
118+
/**
119+
* Check RGBA format
120+
*/
121+
$.formUtils.addValidator({
122+
name: 'rgba',
123+
validatorFunction: function(val, $el) {
124+
if ($el.valAttr('allow-transparent') === 'true' && val === 'transparent') {
125+
return true;
126+
}
127+
128+
var removedSpace = val.replace(/ /g, '');
129+
var regex = /\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3},[0,1]{1}.?[0-9]*\)/i;
130+
131+
if (removedSpace.match(regex)) {
132+
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
133+
var valueSliced = removeBrackets.split(',');
134+
var isValid = true;
135+
136+
valueSliced.forEach(function(i) {
137+
var value = filterFloat(i);
138+
if (Number.isInteger(value)) {
139+
var isInRange = value >= 0 && value <= 255;
140+
if (!isInRange) {
141+
isValid = false;
142+
}
143+
} else {
144+
if (!isBetween0and1(value)) {
145+
isValid = false;
146+
}
147+
}
148+
});
149+
return isValid;
150+
}
151+
152+
return false;
153+
},
154+
errorMessage: '',
155+
errorMessageKey: 'badRgba'
156+
});
157+
158+
/**
159+
* Check HSL format
160+
*/
161+
$.formUtils.addValidator({
162+
name: 'hsl',
163+
validatorFunction: function(val, $el) {
164+
if ($el.valAttr('allow-transparent') === 'true' && val === 'transparent') {
165+
return true;
166+
}
167+
168+
var isInRange;
169+
var removedSpace = val.replace(/ /g, '');
170+
var regex = /\([0-9]{1,3},[0-9]{1,3}%,[0-9]{1,3}%\)/i;
171+
172+
if (removedSpace.match(regex)) {
173+
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
174+
var valueSliced = removeBrackets.split(',');
175+
var isValid = true;
176+
177+
valueSliced.forEach(function(i, index) {
178+
var parsedInt = parseInt(i);
179+
180+
if (Number.isInteger(parsedInt)) {
181+
if (index === 0) {
182+
isInRange = 0 <= parsedInt && parsedInt <= 360;
183+
if (!isInRange) {
184+
isValid = false;
185+
}
186+
} else {
187+
isInRange = 0 <= parsedInt && parsedInt <= 100;
188+
if (!isInRange) {
189+
isValid = false;
190+
}
191+
}
192+
} else {
193+
isValid = false;
194+
}
195+
});
196+
return isValid;
197+
}
198+
199+
return false;
200+
},
201+
errorMessage: '',
202+
errorMessageKey: 'badHsl'
203+
});
204+
205+
/**
206+
* Check HSLA format
207+
*/
208+
$.formUtils.addValidator({
209+
name: 'hsla',
210+
validatorFunction: function(val, $el) {
211+
if ($el.valAttr('allow-transparent') === 'true' && val === 'transparent') {
212+
return true;
213+
}
214+
215+
var isInRange;
216+
var removedSpace = val.replace(/ /g, '');
217+
var regex = /\([0-9]{1,3},[0-9]{1,3}%,[0-9]{1,3}%,[0,1]{1}.?[0-9]*\)/i;
218+
219+
if (removedSpace.match(regex)) {
220+
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
221+
var valueSliced = removeBrackets.split(',');
222+
var isValid = true;
223+
224+
valueSliced.forEach(function(i, index) {
225+
var value = filterFloat(i);
226+
227+
if (Number.isInteger(value)) {
228+
229+
if (index === 0) {
230+
isInRange = 0 <= value && value <= 360;
231+
if (!isInRange) {
232+
isValid = false;
233+
}
234+
} else {
235+
236+
isInRange = 0 <= value && value <= 100;
237+
if (!isInRange) {
238+
isValid = false;
239+
}
240+
}
241+
} else {
242+
if (isNaN(value)) {
243+
// percent value
244+
value = parseInt(i);
245+
isInRange = 0 <= value && value <= 100;
246+
if (!isInRange) {
247+
isValid = false;
248+
}
249+
} else {
250+
isInRange = 0 <= value && value <= 1;
251+
if (!isInRange) {
252+
isValid = false;
253+
}
254+
}
255+
}
256+
});
257+
return isValid;
258+
}
259+
260+
return false;
261+
},
262+
errorMessage: '',
263+
errorMessageKey: 'badHsla'
264+
});
265+
266+
})(jQuery);
267+
268+
269+
}));

0 commit comments

Comments
 (0)