Lardy Lard

by batcave

HTML

<div class="form__container">
    <div class="form__item">
        <input type="text" class="form__input" data-validation="3" />
    </div>
    <div class="form__item hidden">
        <input type="text" class="form__input" data-validation="3" />
    </div>
    <div class="form__item hidden">
        <button class="form__button">button</button>
    </div>
</div>

CSS

.form__container {
    padding: 20px;
}
.form__item {
    margin: 0 0 20px 0;
}
.form__item.hidden {
    display: none;
}
.form__input {
    border: 1px solid #ccc;
    line-height: 22px;
}
.form__button {
    border: 1px solid #ccc;
    background: #ededed;
}
.form__item.error .form__input {
    border: 1px solid red;
}

JavaScript

var form = {
    init: function () {
        $('.form__input').on('blur', function () {
            var $this = $(this),
                formItem = $this.parents('.form__item');

            if (form.validate($this)) {
                formItem.removeClass('error');
                
                //use the current form__item to find the next 
                formItem.next().show();
                return false;
            }
            
            //validation did not pass
            formItem.addClass('error');
            return false;
        });
    },

    validate: function ($input) {
        return ($input.val() != '') ? true : false;
    }
}

form.init();