validate-string.html

<link rel="import" href="../polymer/polymer-element.html" />

<dom-module id="validate-string"></dom-module>
<script>
	/**
	 * This component will validate the `input` attribute against either the `acceptedValues`
	 * array or a regular expression. When validation succeeds it will return the `input`
	 * value via an `ouput` attribute for further databinding. Also has an `isValid` boolean
	 * attribute for use when the actual value is not required.
	 *
	 * Example:
	 *
	 * ```
	 * <validate-string input='[[myValue]]'
	 *                 output='{{validatedValue}}'
	 *               is-valid='{{saveThisSomewhereElse}}'
	 *         acceptedValues='["possible match 1", "possible match 2", ...]'>
	 * </validate-string>
	 * ```
	 *
	 * @demo demo/index.html
	 * @test test/index.html
	 */
	class ValidateString extends Polymer.Element {
		static get is() { return 'validate-string'; }

		static get properties() {
			return {
				/**
				 * sets an optional array of acceptible values for `input`
				 */
				acceptedValues: {
					type: Array,
					value: function() { return []; }
				},
				/**
				 * stores a filtered version of the specified array of acceptable values
				 */
				_filteredValues: {
					type: Array,
					value: function() { return []; },
					computed: '_filter(acceptedValues)'
				},
				/**
				 * specifies an optional regular expression the `input` should be validated against
				 */
				acceptedRegex: {
					type: String,
					value: ''
				},
				/**
				 * takes in the string to validate
				 */
				input: {
					type: String,
					value: ''
				},
				/**
				 * outputs either the `input` value when validation succeeds, or otherwise null
				 */
				output: {
					type: String,
					value: '',
					notifies: true,
					computed: '_validateIt(input, _filteredValues, acceptedRegex)'
				},
				/**
				 * indicates whether the most-recent validation attempt succeeded or not
				 */
				isValid: {
					type: Boolean,
					value: false,
					readOnly: true,
					notifies: true
				},
				/**
				 * indicates for internal use whether the array option has been specified and is valid
				 */
				_haveArrayValues: {
					type: Boolean,
					computed: '_notEmptyZeroOrNull(_filteredValues)'
				}
			}
		}

		/**
		 * Iterates over the input array values creating a new array with empty values removed
		 *
		 * @param {array} array the array of values to filter empty values from
		 * @return {array} returns a copy of the input array with empty values removed
		 */
		_filter(array) {
			var host = this;
			var newArray = [];
			if (host._notEmptyZeroOrNull(array)) {
				array.forEach(function(item) {
					if (host._notEmptyZeroOrNull(item)) {
						newArray.push(item);
					}
				});
			}
			return newArray;
		}

		/**
		 * Helper function to check for non-empty values. Used by `_filter`.
		 *
		 * @param {object} value an arbitrary value to check
		 * @return {boolean} return value is `true` if the input value is non-empty
		 */
		_notEmptyZeroOrNull(value) {
			if (value === null || value === false) {
				return false;
			}
			if (typeof(value['length']) === 'number') {
				return (value.length > 0) ? true : false;
			}
			if (typeof(value === 'string')) {
				return (value !== '') ? true : false;
			}
			return true;
		}

		/**
		 * The meat of the component.
		 *
		 * This function does the actual validation. When validation succeeds,
		 * this function will return the `input`, and will also set the `isValid`
		 * property of the component to `true`. If validation fails the `isValid`
		 * will be switched to `false` and the function will return `null`.
		 *
		 * @param {string} input the string to validate
		 * @param {array} values the optional array of strings to compare `input` against. set to null or false to bypass
		 * @param {string} regex the regular expression as a string to test against the `input` string
		 * @return {string} output returns the `input` value when validation succeeds or otherwise null
		 */
		_validateIt(input, values, regex) {
			var valid = false;
			if (typeof input === 'string' && input != '') {
				if (values !== null && values.length > 0) {
					valid = values.some(function(value, index, values) {
						return value !== null && value !== '' && input === value;
					});
				} else if (regex != '') {
					var re = new RegExp(regex);
					valid = re.test(input);
				} else {
					valid = true;
				}
			}
			
			if (valid) {
				this._setIsValid(true);
				return input;
			}

			this._setIsValid(false);
			return null;
		}
	}

	customElements.define(ValidateString.is, ValidateString);
</script>