Делаю проверку на валидность формы. Сделал так:
$('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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
На сайте, сделал добавление комментариев, подскажите, какой код можно вписать, что бы испортить данные?
Ребят те кто знают и умеют, нужно переделать этот SQL запрос в запрос RedBeanPHP, помогите пожалуйста!
Ребята возник такой вопрос: Как перенести объект ( без методов ) по сессии? К примеру такой код: