HTML5 email string checker - andrew pougher

by Andrew Pougher

HTML

<div class="container"><div id="divEdit" class="panel panel-content" contenteditable="true">[email protected];[email protected];aa-dsd.jj</div>
<div id="checkit" class="btn btn-xs btn-danger">Click to test email addresses</div>
</div>

CSS

#divEdit {
    background-color: #fff;
    border: 1px solid #000;
    padding: 5px;
    width: 400px;    
    line-height:15px;
    height:245px;
    overflow:auto;
}

.red {
	background-color:#ff0022;
}

JavaScript

$('#checkit').click(function() {
		var textEntered = $('#divEdit').text();
		var textResult = [];
		$.each(textEntered.split(';'), function(index, item) {
			if (item.match(/^\S+@\S+\.\S+$/)) {
				textResult.push(item);
			}
			else {
				textResult.push('<span class="badge text-danger red">' + item + '</span>');
                // consider using remove here in production and save to file for later review.
			}
		});
		$('#divEdit').html(textResult.join(';'));
	});