formvalidation
Version:
The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks
157 lines (140 loc) • 6.23 kB
JavaScript
/**
* color validator
*
* @link http://formvalidation.io/validators/color/
* @author https://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2015 Nguyen Huu Phuoc
* @license http://formvalidation.io/license/
*/
(function($) {
FormValidation.I18n = $.extend(true, FormValidation.I18n || {}, {
'en_US': {
color: {
'default': 'Please enter a valid color'
}
}
});
FormValidation.Validator.color = {
html5Attributes: {
message: 'message',
type: 'type'
},
enableByHtml5: function($field) {
return ('color' === $field.attr('type'));
},
SUPPORTED_TYPES: [
'hex', 'rgb', 'rgba', 'hsl', 'hsla', 'keyword'
],
KEYWORD_COLORS: [
// Colors start with A
'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
// B
'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood',
// C
'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
// D
'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta',
'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue',
'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray',
'dimgrey', 'dodgerblue',
// F
'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
// G
'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey',
// H
'honeydew', 'hotpink',
// I
'indianred', 'indigo', 'ivory',
// K
'khaki',
// L
'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan',
'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen',
'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen',
'linen',
// M
'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen',
'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream',
'mistyrose', 'moccasin',
// N
'navajowhite', 'navy',
// O
'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid',
// P
'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink',
'plum', 'powderblue', 'purple',
// R
'red', 'rosybrown', 'royalblue',
// S
'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue',
'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
// T
'tan', 'teal', 'thistle', 'tomato', 'transparent', 'turquoise',
// V
'violet',
// W
'wheat', 'white', 'whitesmoke',
// Y
'yellow', 'yellowgreen'
],
/**
* Return true if the input value is a valid color
*
* @param {FormValidation.Base} validator The validator plugin instance
* @param {jQuery} $field Field element
* @param {Object} options Can consist of the following keys:
* - message: The invalid message
* - type: The array of valid color types
* @returns {Boolean}
*/
validate: function(validator, $field, options) {
var value = validator.getFieldValue($field, 'color');
if (value === '') {
return true;
}
// Only accept 6 hex character values due to the HTML 5 spec
// See http://www.w3.org/TR/html-markup/input.color.html#input.color.attrs.value
if (this.enableByHtml5($field)) {
return /^#[0-9A-F]{6}$/i.test(value);
}
var types = options.type || this.SUPPORTED_TYPES;
if (!$.isArray(types)) {
types = types.replace(/s/g, '').split(',');
}
var method,
type,
isValid = false;
for (var i = 0; i < types.length; i++) {
type = types[i];
method = '_' + type.toLowerCase();
isValid = isValid || this[method](value);
if (isValid) {
return true;
}
}
return false;
},
_hex: function(value) {
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
},
_hsl: function(value) {
return /^hsl\((\s*(-?\d+)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*)\)$/.test(value);
},
_hsla: function(value) {
return /^hsla\((\s*(-?\d+)\s*,)(\s*(\b(0?\d{1,2}|100)\b%)\s*,){2}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/.test(value);
},
_keyword: function(value) {
return $.inArray(value, this.KEYWORD_COLORS) >= 0;
},
_rgb: function(value) {
var regexInteger = /^rgb\((\s*(\b([01]?\d{1,2}|2[0-4]\d|25[0-5])\b)\s*,){2}(\s*(\b([01]?\d{1,2}|2[0-4]\d|25[0-5])\b)\s*)\)$/,
regexPercent = /^rgb\((\s*(\b(0?\d{1,2}|100)\b%)\s*,){2}(\s*(\b(0?\d{1,2}|100)\b%)\s*)\)$/;
return regexInteger.test(value) || regexPercent.test(value);
},
_rgba: function(value) {
var regexInteger = /^rgba\((\s*(\b([01]?\d{1,2}|2[0-4]\d|25[0-5])\b)\s*,){3}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/,
regexPercent = /^rgba\((\s*(\b(0?\d{1,2}|100)\b%)\s*,){3}(\s*(0?(\.\d+)?|1(\.0+)?)\s*)\)$/;
return regexInteger.test(value) || regexPercent.test(value);
}
};
}(jQuery));