Делаю проверку на валидность формы. Сделал так:
$('input').keyup(function(){
if (!$(this)[0].checkValidity()){
$(this).parent('.form-group').removeClass('has-sucess');
$(this).parent('.form-group').addClass('has-error');
}
else {
$(this).parent('.form-group').removeClass('has-error');
$(this).parent('.form-group').addClass('has-success');
}
});
Но у меня у одних полей родитель .form-group, а у других .input-group:
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" name="login-pass" placeholder="Пароль" pattern="[A-z0-9]{6,15}" title="Мінімальна кількість символів - 6.">
</div>
</div>
<div class="form-group col-sm-6">
<label for="register2">Прізвище</label>
<input name="register-surname" type="text" class="form-control" id="register2" placeholder="Ваше прізвище" pattern="^[А-ЯІЇ][а-яії]{2,9}" title="інімальна кількість символів - 3. Перша велика." required>
</div>
Как мне сделать поиск .parent() по нескольким параметрам?
Если правильно понял, вы меняете родителю классы, чтобы показать пользователю, правильно ли заполнено поле. Поэтому думаю, что в обоих примерах вам надо искать именно form-group. Тогда вы будете добавлять классы к блокам одного и того же уровня и с одинаковым «базовым» классом. Так будет меньше проблем с настройкой стилей.
Попробуйте метод .closest(). Он найдёт ближайшего предка с нужным вам классом.
А метод .toggleClass() поможет сократить код. Например, так:
$('input').keyup(function(){
var isValid = $(this)[0].checkValidity();
$(this).closest('.form-group').toggleClass('has-success', isValid).toggleClass('has-error', !isValid);
});
.has-success { background: green; }
.has-error { background: red; }
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" name="login-pass" placeholder="Пароль" pattern="[A-z0-9]{6,15}" title="Мінімальна кількість символів - 6.">
</div>
</div>
<div class="form-group col-sm-6">
<label for="register2">Прізвище</label>
<input name="register-surname" type="text" class="form-control" id="register2" placeholder="Ваше прізвище" pattern="^[А-ЯІЇ][а-яії]{2,9}" title="інімальна кількість символів - 3. Перша велика." required>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Как вариант перечисление классов
$(this).parent('.form-group, .input-group');
Используйте .closest():
$('input').keyup(function() {
var formgroup = $(this).closest('.form-group');
if (!$(this)[0].checkValidity()) {
formgroup.removeClass('has-sucess');
formgroup.addClass('has-error');
} else {
formgroup.removeClass('has-error');
formgroup.addClass('has-success');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости