JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="frm-input">
    <input data-validate="text" tabindex="1" autofocus />
    <div class="input-error">
        error
    </div>
</div>

<div class="frm-input">
    <input data-validate="text" tabindex="2" />
    <div class="input-error">
        error
    </div>
</div>

<div class="frm-input">
    <input data-validate="text" tabindex="3" />
    <div class="input-error">
        error
    </div>
</div>

<a href="#" class="js-frm-submit">Form submit</a>

SCSS

.frm-input {
    display: block;
    position: relative;
    width: 150px;
    border: 1px solid #000;
    margin-bottom: 30px;
    input {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        border: 0; outline: 0;        
    }
    .input-error {
        display: none;
        position: absolute;
        width: 100%;
        top: 100%; left: 0px;
        margin: 0px 0px 0px 0px;
        background: #eee;
    }
}

JavaScript

$('.js-frm-submit').click(function(e){
    e.preventDefault(); 
   
    var forms = $('input[data-validate]');
    
    $forms.on('keyup keypress change', function() {
        var $this = $(this);
        setTimeout(function(){ formChecking($this); }, 50);
    });
    
    
    function formChecking($inpForms) {
            var errorCnt = true;
            $inpForms.each(function(){
                var $this = $(this);
                var validMethod  = $this.data('validate');
                var validData    = $this.val();
                var placeHolder  = $this.attr('placeholder');

                if (validMethod == 'text') {
                    if ((validData.length < 1) || (validData == placeHolder)) { errorCnt = false; $this.parent().addClass('show-error'); }
                    else { $this.parent().removeClass('show-error'); }
                }

                if (validMethod == 'email') {
                    var regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                    if (!regex.test(validData) || (validData == placeHolder)) { errorCnt = false; $this.parent().addClass('show-error'); }
                    else { $this.parent().removeClass('show-error'); }
                }

                if (validMethod == 'textarea') {
                    if ((validData.length < 1) || (validData == placeHolder)) { errorCnt = false; $this.parent().addClass('show-error-textarea'); }
                    else { $this.parent().removeClass('show-error-textarea'); }
                }
            });
            return errorCnt;
        }
    
});