keriati/test.html

## test.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .center {
            text-align: center;
        }
        #myInput {
            font-size: 24px;
            height: 32px;
        }
        .hl {
            color: #4169e1;
        }
        .valid {
            background-color: #adff2f;
        }
        .invalid {
            background-color: #ff69b4;
        }
    </style>
</head>
<body>

<h1 class="center">Character detection test</h1>

<p class="center">
    <br/><br/>
    <input type="text" name="myInput" id="myInput"/><br/><br/>

    <button>Stupid Button</button><br/><br/>
    <span>RegExp: </span><input type="text" name="regexp" id="regexp" value="[a-zA-ZäöüÄÖÜß \.]"/><br/>
    <span>Validation: </span><span class="hl" id="valid"></span><br/>
    <span id="errormsg"></span>
</p>

<div class="center" id="output">

</div>

<script src="jquery.js"></script>
<script>
    (function () {
        var $input = $('#myInput'),
            $regexp = $('#regexp'),
            $valid = $('#valid'),
            $errormsg = $('#errormsg');

        $input.on('change', function (e) {

            var myRegTest,
                myRegMatch,
                value,
                match,
                bad = new String(),
                pos;

            myRegTest = new RegExp('^' + $regexp.val() + '+$', '');
            myRegMatch = new RegExp($regexp.val() + '+', 'g');
            value = new String($input.val());

            if(myRegTest.test(value)) {
                $valid.html('True');
                $errormsg.html('');
                $input.addClass('valid');
                return true;
            }

            bad = value;
            match = bad.match(myRegMatch);
            if (match !== null ) {
                for(var i in match) {
                    if(match.hasOwnProperty(i)) {
                        bad = bad.replace(match[i], '');
                    }
                }
            }

            bad = rmDupes(bad.split('')).join('');

            $valid.html('False');
            $errormsg.html('Invalid characters: ' + bad);
            $input.addClass('invalid');

            return false;
        });

        function rmDupes(arr) {
            var i,
                out = [],
                obj = {};

            for (i = 0; i < arr.length; i++) {
                obj[arr[i]] = 0;
            }

            for (i in obj) {
                out.push(i);
            }

            return out;
        }
    })();
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	.center {
	text-align: center;
	}
	#myInput {
	font-size: 24px;
	height: 32px;
	}
	.hl {
	color: #4169e1;
	}
	.valid {
	background-color: #adff2f;
	}
	.invalid {
	background-color: #ff69b4;
	}
	</style>
	</head>
	<body>

	<h1 class="center">Character detection test</h1>

	<p class="center">
	<br/><br/>
	<input type="text" name="myInput" id="myInput"/><br/><br/>

	<button>Stupid Button</button><br/><br/>
	<span>RegExp: </span><input type="text" name="regexp" id="regexp" value="[a-zA-ZäöüÄÖÜß \.]"/><br/>
	<span>Validation: </span><span class="hl" id="valid"></span><br/>
	<span id="errormsg"></span>
	</p>

	<div class="center" id="output">

	</div>

	<script src="jquery.js"></script>
	<script>
	(function () {
	var $input = $('#myInput'),
	$regexp = $('#regexp'),
	$valid = $('#valid'),
	$errormsg = $('#errormsg');

	$input.on('change', function (e) {

	var myRegTest,
	myRegMatch,
	value,
	match,
	bad = new String(),
	pos;

	myRegTest = new RegExp('^' + $regexp.val() + '+$', '');
	myRegMatch = new RegExp($regexp.val() + '+', 'g');
	value = new String($input.val());

	if(myRegTest.test(value)) {
	$valid.html('True');
	$errormsg.html('');
	$input.addClass('valid');
	return true;
	}

	bad = value;
	match = bad.match(myRegMatch);
	if (match !== null ) {
	for(var i in match) {
	if(match.hasOwnProperty(i)) {
	bad = bad.replace(match[i], '');
	}
	}
	}

	bad = rmDupes(bad.split('')).join('');

	$valid.html('False');
	$errormsg.html('Invalid characters: ' + bad);
	$input.addClass('invalid');

	return false;
	});

	function rmDupes(arr) {
	var i,
	out = [],
	obj = {};

	for (i = 0; i < arr.length; i++) {
	obj[arr[i]] = 0;
	}

	for (i in obj) {
	out.push(i);
	}

	return out;
	}
	})();
	</script>
	</body>
	</html>