JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/mailcheck.min.js"></script>
<div class="row collapse">
    <div id="firstName" class="input-wrapper small-12">
        <input type="text" class="text-field" placeholder="First Name" name="firstName" id="firstName-input" value="" min="1" required></input>
        <div class="tip"><span>Please enter your first name</span></div>
        <div class="warning"></div>
    </div>
</div>
<div class="row collapse">
    <div id="lastName" class="input-wrapper small-12">
        <input type="text" class="text-field" placeholder="Last Name" name="lastName" id="lastName-input" value="" required></input>
        <div class="tip"><span>Please enter your surname</span></div>
        <div class="warning"></div>
    </div>
</div>
<div class="row collapse">
    <div id="email" class="input-wrapper small-12">
        <input type="text" class="text-field" placeholder="Email Address" name="email" id="email-input"></input>
        <div class="tip"><span>Please enter a valid email address</span></div>
        <div class="warning"></div>
    </div>
</div>
<div class="row collapse">
    <div id="birthday small-12 columns">
        <select id="day" name="day-input" class="small-4 columns" required>
            <option value="#">Day</option>
        </select>
        <select id="month" name="month-input" class="small-4 columns" required>
            <option value="#">Month</option>
        </select>
        <select id="year" name="year-input" class="small-4 columns" required>
            <option value="#">Year</option>
        </select>
        <div class="warning"></div>
    </div>
</div>
<div class="row collapse">
    <div id="password" class="input-wrapper small-12 columns">
        <div class='small-6 columns no-pad-left'>
            <input type="password" class="text-field" placeholder="Password" name="password"...

CSS

body {
    padding: 10px;
}
input:required, select:required{
    border-color: orange;
    border-width: 2px;
}
.success-field {
    border-color: green !important;
    border-width: 2px !important;
}
.success-field:before {
    content: "a";
    display: block;
}
.error-field {
    border-color: red !important;
    border-width: 2px !important;
}
.tip{
    background-color: lightgray;
    border-radius: 0 0 5px 5px;
    display: none;
    margin: -16px 0 16px 0;
    padding: 0.25em 0.5em;
}
.tip span {
    font-size: 0.8rem;
}
#submit {
    width: 100%;
}
.no-pad-left {
    padding-left: 0;
}
.no-pad-right {
    padding-right: 0;
}

JavaScript

//POPULATE DROPDOWNS
var d = new Date();
var day = $('#day');
var month = $('#month');
var year = $('#year');
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

for (var i = 1; i <= 31; i++) {
    var opt = i;
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    day.append(el);
}

for (var i = 1; i <= 12; i++) {
    var opt = i;
    var el = document.createElement("option");
    el.textContent = months[i - 1];
    el.value = opt;
    month.append(el);
}

for (var i = (d.getFullYear() - 18); i > (d.getFullYear() - 100); i--) {
    var opt = i;
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    year.append(el);
}

var alphaRegex = new RegExp(/[a-zA-Z\s]/g);
var numericRegex = new RegExp(/([0-9])/g);
var specialCharactersRegex = new RegExp(/([^A-Za-z0-9\s]+)/g);
var emailRegex = new RegExp(/^[0-9a-zA-Z]+([0-9a-zA-Z]*[-._+])*[0-9a-zA-Z]+@[0-9a-zA-Z]+([-.][0-9a-zA-Z]+)*([0-9a-zA-Z]*[.])[a-zA-Z]{2,6}$/i);

var alphaCheck = function (input) {
    var regex = input.match(alphaRegex);
    if (regex !== null) {
        return false;
    }
};

var numericCheck = function (input) {
    var regex = input.match(numericRegex);
    if (regex !== null) {
        return false;
    }
};

var specialCheck = function (input) {
    var regex = input.match(specialCharactersRegex);
    if (regex !== null) {
        return false;
    }
};

var emailCheck = function (input) {
    input.replace(/ /g, '');
    var regex = input.match(emailRegex);
    if (regex === null && input.length > 0) {
        return false;
    }
};

var checkMail = function (field) {
    $('#' + field.ID).on('blur', function () {
        $(this).mailcheck({
            suggested: function (element, suggestion) {
                showEmailSuggestion(field.ID, suggestion);
            },
            empty: function (element) {
                //console.log(element)
            }
    ...