Make sure tags that mismatch pattern are not added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tags-input",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "tags-input.js",
   "description": "<input type=\"tags\"> like magic.",
   "scripts": {

src/tags-input.js

@@ -45,12 +45,26 @@ export default function tagsInput(input) {
 	// Return false if no need to add a tag
 	function addTag(text) {
 		// Add multiple tags if the user pastes in data with SEPERATOR already in it
-		if (~text.indexOf(SEPERATOR)) text = text.split(SEPERATOR);
-		if (Array.isArray(text)) return text.forEach(addTag);
+		if (text.indexOf(SEPERATOR) >= 0) {
+			text = text.split(SEPERATOR);
+		}
+
+		if (Array.isArray(text)) {
+			return text.forEach(addTag);
+		}
 
 		let tag = text && text.trim();
 		// Ignore if text is empty
-		if (!tag) return false;
+		if (!tag) {
+			return false;
+		}
+
+		// Don't add if iti's invalid (eg, for pattern=)
+		if (!base.input.checkValidity()) {
+			base.classList.add('error')
+			setTimeout( () => base.classList.remove('error') , 100)
+			return false;
+		}
 
 		// For duplicates, briefly highlight the existing tag
 		if (!input.getAttribute('duplicates')) {

src/tags-input.less

@@ -7,6 +7,10 @@
 	border-radius: 2px;
 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 
+	&.error > input {
+		color: #FCC;
+	}
+
 	.tag {
 		display: inline-block;
 		background: #EEE;
@@ -44,6 +48,7 @@
 		font: inherit !important;
 		font-size: 100% !important;
 		outline: none !important;
+		transition: color 100ms ease;
 	}
 
 	.selected ~ input {