JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <h3>Formulier</h3>
            <form role="form" id="validate">
                <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="text" class="form-control" id="email" data-regex="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$">
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd" data-regex="^[a-z0-9_-]{6,18}$">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me</label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</div>

CSS

.notoke {
    color: red;
}

JavaScript

$("form#validate :input").on("change paste keyup", function () {
    $(this).toggleClass('notoke', !new RegExp($(this).data('regex')).test($(this).val()));
});