.parent() и поиск разных родителей

252
09 июля 2017, 14:53

Делаю проверку на валидность формы. Сделал так:

$('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() по нескольким параметрам?

Answer 1

Если правильно понял, вы меняете родителю классы, чтобы показать пользователю, правильно ли заполнено поле. Поэтому думаю, что в обоих примерах вам надо искать именно 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>

Answer 2

Как вариант перечисление классов

  $(this).parent('.form-group, .input-group');
Answer 3

Используйте .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>

READ ALSO
Проверка сайте на порчу данных

Проверка сайте на порчу данных

На сайте, сделал добавление комментариев, подскажите, какой код можно вписать, что бы испортить данные?

201
Нужно SQL запрос переделать в запрос RedBeanPHP

Нужно SQL запрос переделать в запрос RedBeanPHP

Ребят те кто знают и умеют, нужно переделать этот SQL запрос в запрос RedBeanPHP, помогите пожалуйста!

193
Перенос Объекта в Сессии

Перенос Объекта в Сессии

Ребята возник такой вопрос: Как перенести объект ( без методов ) по сессии? К примеру такой код:

180