Пишу валидацию для форм, их может быть неограниченное количество на странице. Подсвечивание красным при необходимых событиях и блокировку снопки сделал.
Теперь необходимо убирать класс btn-submit--disabled
с кнопки при заполненных полях, это у меня и не получается сделать.
Ссылка на рабочий пример.
$(document).ready(function() {
validateInput();
blockSubmit();
});
function validateInput() {
//vars
var $input = $('.js-input');
//validate-input
$input.on('change focusout', function() {
var type = $(this).attr('data-validate'),
$this = $(this);
if (type == 'require') {
if ($this.val().length < 1) {
$this.attr('data-success', 0);
$this.parent().addClass('form__label--error');
//$this.parents('.form').find('input[type=submit]').addClass('btn-submit--disabled');
} else {
$this.attr('data-success', 1);
$this.parent().removeClass('form__label--error');
//$this.parents('.form').find('input[type=submit]').removeClass('btn-submit--disabled');
}
}
});
}
function blockSubmit() {
var $form = $('.form'),
$label = $('.form__label'),
//$labelError = $('form__label--error'),
$this = $(this),
$submit = $('input[type=submit]');
var $inputs = $form.find('.js-input');
$form.change(function() {
$inputs.each(function() {
if (this.value == '') {
$this.parents('.form').find('input[type=submit]').addClass('btn-submit--disabled');
} else {
$this.parents('.form').find('input[type=submit]').removeClass('btn-submit--disabled');
}
});
});
}
.form__item-mod-inline-block {
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
}
.btn-submit--disabled {
opacity: .5;
pointer-events: none;
}
.form__input {
border: 2px solid #c4d9ea;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
width: 100%;
height: 45px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 25px 5px 18px;
font: 400 14px/18px'Lato Regular';
color: #1c1c1c;
letter-spacing: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
z-index: 1;
background: 0 0;
}
.form__label--error {
border-color: #e7bec3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form form-mod-no-padding">
<div class="form__item form__item-mod-inline-block form__item-330 form__item-mod-margin-bottom-25">
<label for="" class="form__label form__label-mod-inline-block">
<span class="form__desc">Текст *</span>
<input type="text" placeholder="текст" class="form__input js-input" data-validate="require" data-success="0">
</label>
</div>
<div class="form__item form__item-mod-inline-block form__item-170 form__item-mod-margin-bottom-25">
<label for="" class="form__label">
<span class="form__desc">Время *</span>
<input type="number" value="" class="form__input js-input" data-validate="require" data-success="0">
</label>
</div>
<input type="submit" value="Сохранить" class="btn btn-140 btn-mod-inline-block btn-submit--disabled">
</form>
<form class="form form-mod-no-padding">
<div class="form__item form__item-mod-inline-block form__item-330 form__item-mod-margin-bottom-25">
<label for="" class="form__label form__label-mod-inline-block">
<span class="form__desc">Текст *</span>
<input type="text" placeholder="текст" class="form__input js-input" data-validate="require" data-success="0">
</label>
</div>
<div class="form__item form__item-mod-inline-block form__item-170 form__item-mod-margin-bottom-25">
<label for="" class="form__label">
<span class="form__desc">Время *</span>
<input type="number" value="" class="form__input js-input" data-validate="require" data-success="0">
</label>
</div>
<input type="submit" value="Сохранить" class="btn btn-140 btn-mod-inline-block btn-submit--disabled">
</form>