Проверьте значение поля ввода и добавьте класс

У меня есть два поля ввода и кнопка отправки (отображается в строке). Я пытаюсь добавить класс к следующему брату после заполнения поля ввода. Поэтому, если поле ввода первого имени заполнено, добавьте класс в поле ввода электронной почты, если поле ввода электронной почты заполнено, добавьте класс в следующее поле ввода и так далее...

Это мой код:

$('.form-display #mce-FNAME').blur(function() {
     if($.trim(this.value).length) {
        $('#mce-EMAIL').toggleClass('animated pulse');
     }else if(...){ }...
});

Мой HTML выглядит так:

<div class="form-display">
    <div class="mc-field-group">
        <label for="mce-FNAME">First Name </label>
        <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
        <label for="mce-EMAIL">Email Address </label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Ответ 1

Захватите все входы, кроме кнопки отправки, в коллекцию.

На входе переключите класс следующего ввода на основании того, имеет ли текущий вход значение:

var inputs = $('.form-display input').not(':submit');

inputs.on('input', function() {
  $(inputs[inputs.index(this) + 1]).toggleClass('animated pulse', this.value > '');
});

Fiddle

Отрывок:

var inputs = $('.form-display input').not(':submit');  //all inputs except submit button

inputs.on('input', function() {
  $(inputs[inputs.index(this) + 1]).toggleClass('animated pulse', this.value > '');
});

.animated.pulse {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-display">
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
  </div>
  <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-CITY">City </label>
    <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-STATE">State </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-ZIP">Zip </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Ответ 2

Рабочая скрипта.

Лучше использовать события blur и input для отслеживания изменений пользователя в поле ввода, а затем использовать методы parents() и next() после проверки того, пуст ли пуст, посмотрите пример ниже.

Надеюсь, что это поможет.

$('body').on('input blur', '.form-display .mc-field-group input',function() {
  if(!$.trim($(this).val()))
  {
    $(this).parents('.mc-field-group').next('.mc-field-group')
           .find('input').addClass('animated pulse');
  }else{
    $(this).parents('.mc-field-group').next('.mc-field-group')
           .find('input').removeClass('animated pulse');
  }
});

.animated.pulse {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-display">
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
  </div>
  <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
    <div class="mc-field-group">
    <label for="mce-CITY">City </label>
    <input type="text" value="" name="CITY" class="required city" id="mce-CITY">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Ответ 3

Вот функция, которая будет искать текущий вход между всеми входами, а затем найдите следующий пустой вход и добавьте следующий класс:

$('input').blur(function() {
     if($.trim(this.value).length) {
       var allInputs = $('input');
       var hasFoundNext = false;
       currentInputIndex = $('input').index(this);

       for (index = currentInputIndex + 1; (index < allInputs.length && !hasFoundNext); index++) {
          if(!$.trim(allInputs[index].value).length) {
            allInputs.eq(index).addClass('next');
            hasFoundNext = true;
          }
       }
     }
});

Jsfiddle: https://jsfiddle.net/wed0104o/

Ответ 4

Вы очень близко, событие размытия - это правильный способ сделать это.

Вот рабочий пример для вас.

$(function() {
  $('form[name=siblings] input').on('keyup', function(e) {
    var className = $(this).attr('name') + "-has-value"; //unique class name
    if ($(this).val().match(/.{3,}/)) { //regex to check value - check length of match
      $(this).next().addClass(className); //add class to next
    } else {
      $(this).next().removeClass(className); //remove class from next
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="siblings">
  <input name="name" type="text" placeholder="name" />
  <input name="email" type="email" placeholder="email" />
  <input name="etc" type="text" placeholder="etc..." />
</form>

Ответ 5

https://jsfiddle.net/sq1mx1rm/

Какой-то грубый способ сделать это, parent() может быть тяжелым.

    $( document ).ready(function() {
      $('.mc-field-group').find('input').bind('focusout', function() {
        console.log($(this).parent().next('.mc-field-group').find('input').attr('id'));
        $(this).parent().next('.mc-field-group').find('input').addClass('test')
          });
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="form-display">
          <div class="mc-field-group">
            <label for="mce-FNAME">First Name </label>
            <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
          </div>
          <div class="mc-field-group">
            <label for="mce-EMAIL">Email Address </label>
            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
          </div>
          <div class="mc-field-group">
            <label for="mce-LastName">Last Name </label>
            <input type="email" value="" name="EMAIL" class="required email" id="mce-LastName">
          </div>
          <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>

Ответ 6

1) Добавьте атрибут onchange к каждому входу. 2) В JS файле создайте глобальный набор входов. 3) В функции changed() найдите индекс измененного ввода. 4) Измените класс следующего ввода.

Ответ 7

Если вы можете изменить HTML, я бы добавил класс ко всем полям ввода, на которые вы хотите настроить таргетинг, иначе вы можете быть спрятаны скрытым полем или другим вводом, на который вы не хотели бы нацеливаться.

$(document).ready(function(){
    var fieldlist = $('.pulsefield');

    fieldlist.bind('blur', function(){
        var currentElement = $(this);
        if(currentElement.val().length>1){
            var currentIndex = fieldlist.index(currentElement);
            if(currentIndex+1<fieldlist.length){
                var nextElement = $(fieldlist.get(currentIndex+1));
                nextElement.toggleClass('animated pulse');
            }
        }
    });
})

Ответ 8

Это должно установить анимацию импульсов в следующих соседних полях, которые еще не заполнены при прохождении формы.

fieldlist = $('.form-display input');

fieldlist.on('input onpropertychange', function() {
     if ( $(this).val().length ) {
            $(this).removeClass('animated pulse');
            if(( fieldlist.index($(this)) + 1 ) < fieldlist.length - 1){
              target = $(fieldlist.get(fieldlist.index($(this))+1));
                if ( target.val().length === 0 ) {
                  target.addClass('animated pulse');
                }
            }
     }
});

$('.form-display input').first().addClass('pulse');
$('.form-display input').first().focus();

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(0.95); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(0.95); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

.pulse {
	animation-name: pulse_animation;
	animation-duration: 500ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-display">
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name</label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME" tabindex=1>
  </div>
  <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
  </div>
  <div class="mc-field-group">
    <label for="mce-PHONE">Phone Number</label>
    <input type="phone" value="" name="PHONE" class="required" id="mce-PHONE">
  </div>
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>