Skip to content

Commit 18150ec

Browse files
victorjonssonvictorjonsson
authored
Merge pull request #633 from dszymczuk/color-validator-improvement
Color validator improvement
2 parents 6bc133b + 39ea090 commit 18150ec

File tree

3 files changed

+195
-48
lines changed

3 files changed

+195
-48
lines changed

‎form-validator/color.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.

‎src/modules/color.js

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@
3131
return value > 0 && value < 1;
3232
};
3333

34+
// workaround for PhantomJS
35+
// https://github.com/ariya/phantomjs/issues/14014
36+
// can't use Number.isInteger
37+
var isInteger = function(value) {
38+
return Math.floor(value) === value && $.isNumeric(value);
39+
};
40+
3441
/**
3542
* Check HEX format
3643
*/
@@ -77,16 +84,17 @@
7784
}
7885

7986
var removedSpace = val.replace(/ /g, '');
80-
var regex = /\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)/i;
87+
var regex = /rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)/i;
8188

8289
if (removedSpace.match(regex)) {
83-
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
90+
var removeRgbCall = removedSpace.replace(/rgb/g, '');
91+
var removeBrackets = removeRgbCall.replace(/\(/g, '').replace(/\)/g, '');
8492
var valueSliced = removeBrackets.split(',');
8593
var isValid = true;
8694

8795
valueSliced.forEach(function(i) {
88-
var parsedInt = parseInt(i);
89-
if ((Number.isInteger(parsedInt) && 0 <= parsedInt && parsedInt <= 255) === false) {
96+
var parsedInt = parseInt(i, 10);
97+
if ((isInteger(parsedInt) && 0 <= parsedInt && parsedInt <= 255) === false) {
9098
isValid = false;
9199
}
92100
});
@@ -110,24 +118,27 @@
110118
}
111119

112120
var removedSpace = val.replace(/ /g, '');
113-
var regex = /\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3},[0,1]{1}.?[0-9]*\)/i;
121+
var regex = /rgba\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3},[0,1]?.?[0-9]*\)/i;
114122

115123
if (removedSpace.match(regex)) {
116-
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
124+
var removeRgbaCall = removedSpace.replace(/rgba/g, '');
125+
var removeBrackets = removeRgbaCall.replace(/\(/g, '').replace(/\)/g, '');
117126
var valueSliced = removeBrackets.split(',');
118127
var isValid = true;
119128

120-
valueSliced.forEach(function(i) {
129+
valueSliced.forEach(function(i, index) {
121130
var value = filterFloat(i);
122-
if (Number.isInteger(value)) {
131+
if (isInteger(value)) {
123132
var isInRange = value >= 0 && value <= 255;
124133
if (!isInRange) {
125134
isValid = false;
126135
}
127-
} else {
128-
if (!isBetween0and1(value)) {
129-
isValid = false;
136+
137+
if (isValid && index === 3) {
138+
isValid = value >= 0 && value < 2;
130139
}
140+
} else if (!isBetween0and1(i)) {
141+
isValid = false;
131142
}
132143
});
133144
return isValid;
@@ -149,26 +160,21 @@
149160
return true;
150161
}
151162

152-
var isInRange;
153163
var removedSpace = val.replace(/ /g, '');
154-
var regex = /\([0-9]{1,3},[0-9]{1,3}%,[0-9]{1,3}%\)/i;
164+
var regex = /hsl\(-?[0-9]{1,3},[0-9]{1,3}%,[0-9]{1,3}%\)/i;
155165

156166
if (removedSpace.match(regex)) {
157-
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
167+
var removeHslCall = removedSpace.replace(/hsl/g, '');
168+
var removeBrackets = removeHslCall.replace(/\(/g, '').replace(/\)/g, '');
158169
var valueSliced = removeBrackets.split(',');
159170
var isValid = true;
160171

161172
valueSliced.forEach(function(i, index) {
162-
var parsedInt = parseInt(i);
173+
var parsedInt = parseInt(i, 10);
163174

164-
if (Number.isInteger(parsedInt)) {
165-
if (index === 0) {
166-
isInRange = 0 <= parsedInt && parsedInt <= 360;
167-
if (!isInRange) {
168-
isValid = false;
169-
}
170-
} else {
171-
isInRange = 0 <= parsedInt && parsedInt <= 100;
175+
if (isInteger(parsedInt)) {
176+
if (index !== 0) {
177+
var isInRange = parsedInt >= 0 && parsedInt <= 100;
172178
if (!isInRange) {
173179
isValid = false;
174180
}
@@ -198,46 +204,44 @@
198204

199205
var isInRange;
200206
var removedSpace = val.replace(/ /g, '');
201-
var regex = /\([0-9]{1,3},[0-9]{1,3}%,[0-9]{1,3}%,[0,1]{1}.?[0-9]*\)/i;
207+
var regex = /hsla\(-?[0-9]{1,3},[0-9]{1,3}%,[0-9]{1,3}%,[0,1]?.?[0-9]*\)/i;
202208

203209
if (removedSpace.match(regex)) {
204-
var removeBrackets = removedSpace.replace(/\(/g, '').replace(/\)/g, '');
210+
var removeHslaCall = removedSpace.replace(/hsla/g, '');
211+
var removeBrackets = removeHslaCall.replace(/\(/g, '').replace(/\)/g, '');
205212
var valueSliced = removeBrackets.split(',');
206213
var isValid = true;
207214

208215
valueSliced.forEach(function(i, index) {
209216
var value = filterFloat(i);
217+
var parsedInt = parseInt(i, 10);
210218

211-
if (Number.isInteger(value)) {
212-
213-
if (index === 0) {
214-
isInRange = 0 <= value && value <= 360;
219+
if (isInteger(value)) {
220+
if (index !== 0 && index !== 3) {
221+
isInRange = value >= 0 && value <= 100;
215222
if (!isInRange) {
216223
isValid = false;
217224
}
218-
} else {
225+
}
219226

220-
isInRange = 0 <= value && value <= 100;
221-
if (!isInRange) {
222-
isValid = false;
223-
}
227+
if (isValid && index === 3) {
228+
isValid = value >= 0 && value < 2;
229+
}
230+
} else if (isNaN(value) && isInteger(parsedInt)) {
231+
isInRange = parsedInt >= 0 && parsedInt <= 100;
232+
if (!isInRange) {
233+
isValid = false;
224234
}
225235
} else {
226-
if (isNaN(value)) {
227-
// percent value
228-
value = parseInt(i);
229-
isInRange = 0 <= value && value <= 100;
230-
if (!isInRange) {
231-
isValid = false;
232-
}
233-
} else {
234-
isInRange = 0 <= value && value <= 1;
235-
if (!isInRange) {
236-
isValid = false;
237-
}
236+
value = filterFloat(Number(i).toFixed(20));
237+
238+
isInRange = value >= 0 && value <= 1;
239+
if (!isInRange) {
240+
isValid = false;
238241
}
239242
}
240243
});
244+
241245
return isValid;
242246
}
243247

‎test/qunit.html

Lines changed: 144 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1124,11 +1124,154 @@
11241124
});
11251125
});
11261126

1127+
test("Color Hex validation", function() {
1128+
1129+
clearForm();
1130+
1131+
var links = [
1132+
{val: '#0000FF', isValid: true},
1133+
{val: '#00F', isValid: true},
1134+
{val: '123', isValid: false},
1135+
{val: '112233', isValid: false},
1136+
{val: '#4567', isValid: false},
1137+
{val: input('transparent', {'allow-transparent': 'true'}), isValid: true},
1138+
{val: 'transparent', isValid: false}
1139+
];
1140+
1141+
$.each(links, function(i, obj) {
1142+
runTest(obj, 'hex');
1143+
});
1144+
});
1145+
1146+
test("Color Rgb validation", function() {
1147+
1148+
clearForm();
1149+
1150+
var links = [
1151+
{val: 'rgb(255,255,255)', isValid: true},
1152+
{val: 'rgb( 255 , 255 , 255 )', isValid: true},
1153+
{val: 'rgb( 255, 255, 255 )', isValid: true},
1154+
{val: 'rgb(255,255,255)', isValid: true},
1155+
1156+
1157+
{val: 'rgb(-10,255,255)', isValid: false},
1158+
{val: '255255255', isValid: false},
1159+
{val: 'rgb(255,255,256)', isValid: false},
1160+
1161+
1162+
{val: input('transparent', {'allow-transparent': 'true'}), isValid: true},
1163+
{val: 'transparent', isValid: false}
1164+
];
1165+
1166+
$.each(links, function(i, obj) {
1167+
runTest(obj, 'rgb');
1168+
});
1169+
});
1170+
1171+
test("Color Rgba validation", function() {
1172+
1173+
clearForm();
1174+
1175+
var links = [
1176+
{val: 'rgba(255,255,255,1)', isValid: true},
1177+
{val: 'rgba( 255 , 255 , 255 , 1 )', isValid: true},
1178+
{val: 'rgba( 255 , 255 , 255 , 1 )', isValid: true},
1179+
{val: 'rgba(255,255,255,1)', isValid: true},
1180+
{val: 'rgba(255,255,255,0)', isValid: true},
1181+
{val: 'rgba(255,255,255,1)', isValid: true},
1182+
{val: 'rgba(255,255,255,0.5)', isValid: true},
1183+
{val: 'rgba(255,255,255,.5)', isValid: true},
1184+
{val: 'rgba(255,255,255,.524141)', isValid: true},
1185+
{val: 'rgba(255,255,255,2)', isValid: false},
1186+
{val: 'rgba(255,255,255,-1)', isValid: false},
1187+
{val: 'rgba(255,255,255,1.000000000001)', isValid: false},
1188+
{val: 'rgba(255,255,255,-0.5)', isValid: false},
1189+
{val: 'rgba(255,255,255,2.3)', isValid: false},
1190+
{val: 'rgba(-10,255,255,1)', isValid: false},
1191+
{val: '2552552551', isValid: false},
1192+
{val: 'rgba(255,255,256),1', isValid: false},
1193+
{val: '0000FF', isValid: false},
1194+
{val: input('transparent', {'allow-transparent': 'true'}), isValid: true},
1195+
{val: 'transparent', isValid: false}
1196+
];
1197+
1198+
$.each(links, function(i, obj) {
1199+
runTest(obj, 'rgba');
1200+
});
1201+
});
1202+
1203+
test("Color Hsl validation", function() {
1204+
1205+
clearForm();
1206+
1207+
var links = [
1208+
{val: 'hsl(120,50%,50%)', isValid: true},
1209+
{val: 'hsl( 120 , 50% , 50% )', isValid: true},
1210+
{val: 'hsl( 120, 50%, 50% )', isValid: true},
1211+
{val: 'hsl(-120,50%,50%)', isValid: true},
1212+
{val: 'hsl(480,50%,50%)', isValid: true},
1213+
1214+
{val: 'hsl(10,-50%,50%)', isValid: false},
1215+
{val: 'hsl(10,50%,-50%)', isValid: false},
1216+
{val: '120,50%,50%', isValid: false},
1217+
{val: 'hsl(120,100%,101%)', isValid: false},
1218+
{val: 'hsl(50%, 50%, 100%)', isValid: false},
1219+
{val: 'hsl(120, 50, 100%)', isValid: false},
1220+
{val: 'hsl(120, 50%, 100)', isValid: false},
1221+
1222+
{val: input('transparent', {'allow-transparent': 'true'}), isValid: true},
1223+
{val: 'transparent', isValid: false}
1224+
];
1225+
1226+
$.each(links, function(i, obj) {
1227+
runTest(obj, 'hsl');
1228+
});
1229+
});
1230+
1231+
test("Color Hsla validation", function() {
1232+
1233+
clearForm();
1234+
1235+
var links = [
1236+
{val: 'hsla(120,50%,50%,1)', isValid: true},
1237+
{val: 'hsla( 120 , 50% , 50%, 1 )', isValid: true},
1238+
{val: 'hsla( 120, 50%, 50% , 1 )', isValid: true},
1239+
{val: 'hsla(-120,50%,50%,1)', isValid: true},
1240+
{val: 'hsla(480,50%,50%,1)', isValid: true},
1241+
{val: 'hsla(120,50%,100%,0)', isValid: true},
1242+
{val: 'hsla(120,50%,100%,1)', isValid: true},
1243+
{val: 'hsla(120,50%,100%,0.5)', isValid: true},
1244+
{val: 'hsla(120,50%,100%,.5)', isValid: true},
1245+
{val: 'hsla(120,50%,100%,.524141)', isValid: true},
1246+
1247+
{val: 'hsla(120,50%,100%,50%)', isValid: false},
1248+
{val: 'hsla(120,50%,100%,2)', isValid: false},
1249+
{val: 'hsla(120,50%,100%,-1)', isValid: false},
1250+
{val: 'hsla(120,50%,100%,1.000000000001)', isValid: false},
1251+
{val: 'hsla(120,50%,100%,-0.5)', isValid: false},
1252+
{val: 'hsla(120,50%,100%,2.3)', isValid: false},
1253+
{val: 'hsla(10,-50%,50%,1)', isValid: false},
1254+
{val: 'hsla(10,50%,-50%,1)', isValid: false},
1255+
{val: '120,50%,50%,1', isValid: false},
1256+
{val: 'hsla(120,100%,101%,1)', isValid: false},
1257+
{val: 'hsla(50%, 50%, 100%,1)', isValid: false},
1258+
{val: 'hsla(120, 50, 100%,1)', isValid: false},
1259+
{val: 'hsla(120, 50%, 100,1)', isValid: false},
1260+
1261+
{val: input('transparent', {'allow-transparent': 'true'}), isValid: true},
1262+
{val: 'transparent', isValid: false}
1263+
];
1264+
1265+
$.each(links, function(i, obj) {
1266+
runTest(obj, 'hsla');
1267+
});
1268+
});
1269+
11271270
// TODO: Write more tests...
11281271
}
11291272

11301273
$.validate({
1131-
modules : 'security, location, sweden, file, date, sanitize, uk, poland',
1274+
modules : 'security, location, sweden, file, date, sanitize, uk, poland, color',
11321275
onModulesLoaded: function( $form ) {
11331276
if( window.console && window.console.log )
11341277
console.log('About to run all tests');

0 commit comments

Comments
 (0)