Highlighting for invalid pattern matches

css/settings.css

@@ -8,4 +8,8 @@ div.colour-field {
 
 div.colour-field input {
 	color: #000;
+}
+
+input.invalid {
+	background-color: #ffb5b5 !important;
 }

functions.php

@@ -1214,6 +1214,8 @@ function buildSettings($array) {
 	<script>
 		$(document).ready(function() {
 			$(\'#'.$pageID.'_form\').find(\'input, select, textarea\').on(\'change\', function() { $(this).attr(\'data-changed\', \'true\'); });
+			var '.$pageID.'Validate = function() { if (this.value && !RegExp(\'^\'+this.pattern+\'$\').test(this.value)) { $(this).addClass(\'invalid\'); } else { $(this).removeClass(\'invalid\'); } };
+			$(\'#'.$pageID.'_form\').find(\'input[pattern]\').each('.$pageID.'Validate).on(\'keyup\', '.$pageID.'Validate);
 			$(\'#'.$pageID.'_form\').find(\'select[multiple]\').on(\'click\', function() { $(this).attr(\'data-changed\', \'true\'); });
 			
 			$(\'#'.$pageID.'_form\').submit(function () {