From 4607e8d5078d5f9689956db1ae0ea80934c50981 Mon Sep 17 00:00:00 2001
From: tumpio <tumpio@sci.fi>
Date: Sat, 3 Jun 2017 17:57:23 +0300
Subject: [PATCH] Fix pattern support

---
 index.html        | 5 +++++
 src/tags-input.js | 9 +++++++++
 tags-input.css    | 5 +++++
 3 files changed, 19 insertions(+)

diff --git a/index.html b/index.html
index 66141e0..daf4eb4 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,11 @@
 		<label for='url'>URL</label>
 		<input id='url' type='url' data-separator=' '>
 		<span class='value'></span>
+		<label for='pattern'>Pattern support</label>
+		<input id='pattern' type='text'
+			   pattern="[A-Za-z]{3}"
+			   placeholder="Enter three letter country code">
+		<span class='value'></span>
 	</form>
 	<script type="text/javascript">
 		var tagsInput = require('tags-input');
diff --git a/src/tags-input.js b/src/tags-input.js
index cac6eac..ebd9eb2 100644
--- a/src/tags-input.js
+++ b/src/tags-input.js
@@ -125,6 +125,15 @@ function tagsInput(input) {
 			// Ignore if text is empty
 			if (!tag) return;
 
+			// Check input validity (eg, for pattern=)
+			// At tags-input init fill the base.input
+			base.input.value = text;
+			if (!base.input.checkValidity()) {
+				base.classList.add('error');
+				setTimeout( () => base.classList.remove('error') , 150);
+				return;
+			}
+
 			// For duplicates, briefly highlight the existing tag
 			if (!allowDuplicates) {
 				let exisingTag = $(`[data-tag="${tag}"]`);
diff --git a/tags-input.css b/tags-input.css
index 7d65a7d..4bf0d76 100644
--- a/tags-input.css
+++ b/tags-input.css
@@ -53,3 +53,8 @@
 .tags-input .selected ~ input {
   opacity: 0.3;
 }
+
+.tags-input.error input {
+	color: #a94442;
+	text-decoration: underline;
+}