JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="xx#[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="xx%[email protected]" class="form-control" />
<input type="text" value="xx&[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="xx*[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="xx/[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="xx^[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="xx{[email protected]" class="form-control" />
<input type="text" value="xx|[email protected]" class="form-control" />
<input type="text" value="xx}[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />
<input type="text" value="[email protected]" class="form-control" />

CSS

.form-control{
    font-size:14px;
    height:24px;
}
.has-error{
    background:Red;
}

JavaScript

//according to http://stackoverflow.com/a/2049510/4338570
//-Uppercase and lowercase English letters (a-z, A-Z)
//-Digits 0 to 9
//-Characters ! # $ % & ' * + - / = ? ^ _ ` { | } ~
//-Character . (dot, period, full stop) provided that it is not the first or last character, and provided also that it does not appear two or more times consecutively.
//are allowed in email

    var emailRegEx = /^([\w-]+(?:(\!|\#|\$|\%|\&|\=|\*|\+|\/|\?|\^|\~|\||\.|\}|\{)[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

$('.form-control').each(function(){
    var el = $(this)
if (emailRegEx.test(el.val()) == false) {
el.addClass('has-error');
    }else
    {
        el.removeClass('has-error');
    }
    
})