JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<form action="" name="mailform" id="mailform">
    <div id="mailform-error" class="mailform-error"></div>
    
    <div class="input-container">
        <label for="mail-form-email">Email</label>
        <input type="text" name="mailform-email" id="mailform-email" placeholder="[email protected]" />
    </div>
    
    <div class="input-container">
        <label for="mail-form-email">Message</label>
        <textarea name="mailform-message" id="mailform-message" rows="10" cols="60" placeholder="Type your message..."></textarea>
    </div>
    
    <div class="input-container">
        <button type="submit" id="mailform-submit">Submit Form</button>
    </div>
</form>

CSS

.mailform-error {
    background-color: #c55;
    padding: 5px;
    margin-bottom: 10px;
    display: none;
}

.mailform-error.show {
    display: block;
}

.input-container > label {
    display: block;
    margin-bottom: 5px;
}

.input-container > input {
    margin-bottom: 15px;
}

.input-container > textarea {
    resize: none;
}

JavaScript

var mailForm = document.getElementById('mailform'),
    mailError = document.getElementById('mailform-error'),
    mailEmail = document.getElementById('mailform-email'),
    mailMessage = document.getElementById('mailform-message');

var checkEmail = function () {
    var elem = mailEmail.value,
        splitter = elem.split(','),
        regex = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
        status = true;
    
    for (var i = 0; i < splitter.length; i++) {
        if (elem !== '' && !regex.test(splitter[i])) {
            status = false;
            
            var invalid = document.createTextNode('Invalid Email(s): ' + splitter[i]);
            mailError.appendChild(invalid);
        }
    }
   
    return status;
};

mailForm.onsubmit = function (e) {
    mailError.innerHTML = '';
    
    if (checkEmail() === true) {
        mailError.style.display = 'none';
    } else {
        mailError.style.display = 'block';
    }
        
    e.preventDefault();
};