JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<form action="" class="signIn--form">
    <div class="input">
        <input type="text">
        <div class="error">error</div>
    </div>
    <div class="input">
        <input type="text">
        <div class="error">error</div>
    </div>
    <button type="submit">submit</button>
</form>

<form action="" class="signIn--form">
    <div class="input">
        <input type="text">
        <div class="error">error</div>
    </div>
    <div class="input">
        <input type="text">
        <div class="error">error</div>
    </div>
    <button type="submit">submit</button>
</form>

CSS

form {
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10px;
}
.input {
    margin-bottom: 10px;
}
button {
    opacity: 0.5;
}
.active button {
    opacity: 1;
}

.input.error input {
    border-color: red;
}

JavaScript

function checkSignIn(){
	var form = document.querySelectorAll('.signIn--form');
    form.forEach(function(elem){
    	var formInputs = elem.querySelectorAll('input')
    	elem.addEventListener('submit',function(e){
            var allInputs = this.querySelectorAll('input');
            allInputs.forEach(function(elem){
            	if(elem.value.length == 0){
                	elem.parentNode.classList.add('error')
                	e.preventDefault()
                }
           	})
        })
        formInputs.forEach(function(elem){
        	elem.addEventListener('keyup',function(){
            	elem.parentNode.classList.remove('error')
                for(var i = 0; i < formInputs.length; i++){
                	if(formInputs[0].value.length > 0 && formInputs[1].value.length > 0 ){
                    	formInputs[i].parentNode.parentNode.classList.add('active')
                    }else {
                    	formInputs[i].parentNode.parentNode.classList.remove('active')
                    }
                }
            })
        })
    })
}
checkSignIn()