Fix pattern support

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');

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}"]`);

tags-input.css

@@ -53,3 +53,8 @@
 .tags-input .selected ~ input {
   opacity: 0.3;
 }
+
+.tags-input.error input {
+	color: #a94442;
+	text-decoration: underline;
+}