JSFiddle - React, Tailwind, and code Playground

by Sasha Ulych

HTML

<div class="password">
        <div class="form-group col-md-3 col-sm-4 col-xs-12">
            <label for="old" class="input">Старый пароль</label>
            <input type="text" class="form-control inputs empty" id="old">
        </div>
        <div class="form-group col-md-3 col-sm-4 col-xs-12">
            <label for="new" class="input">Новый пароль</label>
            <input type="text" class="form-control inputs empty" id="new">
        </div>
        <div class="form-group col-md-3 col-sm-4 col-xs-12">
            <label for="apply" class="input">Подтверждение пароля</label>
            <input type="text" class="form-control inputs empty" id="apply">
        </div>
            <div class="clearfix"></div>
            <a href="" class="save empty">Сохранить изменения</a>
       </div>
    </div>
 <div class="profile_edit">
        <div class="form-group col-md-5 col-sm-5 col-xs-12">
          <label for="email" class="input one">E-mail</label>
          <input type="text" class="form-control inputs empty" id="email">
        </div>
        <div class="form-group col-md-5 col-sm-5 col-xs-12">
          <label for="fio" class="input two">ФИО или наименования ЮЛ</label>
          <input type="text" class="form-control inputs empty" id="fio">
        </div>
        <div class="form-group col-md-5 col-sm-5 col-xs-12">
        <label for="phone" class="input three">Телефон</label>
          <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">+7</span>
            <input type="text" class="form-control empty" placeholder="" aria-describedby="basic-addon1" id="phone">
          </div>
        </div>
        <div class="form-group col-md-5 col-sm-5 col-xs-12">
          <label for="address" class="input four">Фактический адрес</label>
          <input type="text" class="form-control inputs empty" id="address">
        </div>
        <div class="clearfix"></div>
        <a href="" class="save empty">Сохранить изменения</a>
       ...

CSS

.save.empty {
    background: red;
}
.save {
    background: green;
}

JavaScript

$(".password input").blur(function(){
    $(".password input").filter(function() {
        return this.value.length !== 0;
    }).removeClass('empty');
    var empt = $('.password').parent().find("input").filter(function() {
        return this.value === "";
    });
    if(empt.hasClass( "empty" )) {
        console.log('some input are not empty');
    } else {
        $('.password .save').removeClass('empty');
    }
  });
$(".profile_edit input").blur(function(){
    $(".profile_edit input").filter(function() {
        return this.value.length !== 0;
    }).removeClass('empty');
    var empty = $('.profile_edit').parent().find("input").filter(function() {
        return this.value === "";
    });
    if(empty.hasClass( "empty" )) {
        console.log('some input are not empty');
    } else {
        $('.profile_edit .save').removeClass('empty');
    }
  });