JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

CSS

div{
  width: 135px;
  display: inline-block
}
input{
  width: 120px
}
.valid{background: rgba(50,205,50, .3)}
.invalid{background: rgba(255,0,0, .3)}

JavaScript

var EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

function emailCheck(value, expectedValue, expectedMismatch, multiple)
{
    var i = document.createElement('input');
    var i2 = document.createElement('input');

    i.type = 'email';
    i.value = i2.value = value;
    i.multiple = !!multiple;
    var mismatch = i.validity.typeMismatch;
    var mismatchPass = mismatch == expectedMismatch;
    var sanitizePass = i.value == expectedValue;
    var mismatchResult = '"' + value + '" is a ' + (mismatch ? 'invalid' : 'valid') + ' email address' + (multiple ? ' list. ' : '. ');
    var sanitizeResult = 'It was sanitized to "' + i.value + '"' + (sanitizePass ? '.' : ', but should be sanitized to "' + expectedValue + '"');
    var result = mismatchResult
    if (value != expectedValue || !sanitizePass)
        result += sanitizeResult

    i2.className = EMAIL_REGEX.test(expectedValue) !== expectedMismatch ? 'valid' : 'invalid'
    
    if (mismatchPass){
    	    i.className = 'valid'
    } else {
     	    i.className = 'invalid'
    }
    browser.appendChild(i)
    regex.appendChild(i2)
}

function debug(txt){
    var h3 = document.createElement('h3')
    var pBrowser = document.createElement('p')
    var pRegex = document.createElement('p')
    h3.innerText = txt
    pBrowser.innerText = "Your browser"
    pRegex.innerText = "Your regex"
    
    browser = document.createElement('div')
    regex = document.createElement('div')
    
    document.body.appendChild(h3)
    browser.appendChild(pBrowser)
    document.body.appendChild(browser)
    regex.appendChild(pRegex)
    document.body.appendChild(regex)
}

var browser
var regex
var expectValid = false;
var expectInvalid = true;
var multiple = true;

debug("Valid single addresses when 'multiple' attribute is not set.");
emailCheck("[email protected]", "[email protected]",...