I have two input fields and a submit button (displayed inline). I'm trying to add a class to the next sibling after a input field is filled out. So if the first name input field is filled out, add a class to the email input field, if the email input field is filled out, add a class to the next input field and so on...

This is my code so far:

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

My HTML looks like this:

<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>

I have two input fields and a submit button (displayed inline). I'm trying to add a class to the next sibling after a input field is filled out. So if the first name input field is filled out, add a class to the email input field, if the email input field is filled out, add a class to the next input field and so on...

This is my code so far:

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

My HTML looks like this:

<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>

• javascript
• jquery
• html
• css

• I agree, using this fiddle it seems to be working. The only thing I can imagine happening is that the class you are adding isn't working the way you want it to. What exactly is .animated.pulse ? – dargue3 Commented Jun 16, 2016 at 15:34
• ..the class is working (animate.css). I'm looking for a way to do it not on blur but based on the value of the current input field.. e.g after a single letter or more was typed in an input box, add the class to the next input field... – Codehan25 Commented Jun 16, 2016 at 15:42

8 Answers 8

Grab all the inputs except the submit button into a collection.

On input, toggle the class of the next input based on whether the current input has a value:

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

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

Fiddle

Snippet:

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>

Here is a function that would look for current input among all inputs, and then find the next empty input and add the next class:

$('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/

Working Fiddle.

Better to use the both events blur and input event to track user change on input field and then use parents() and next() methods after checking if the blured input is empty, check example below.

Hope this helps.

$('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>

https://jsfiddle.net/sq1mx1rm/

Kind of rough way of doing it, parent() can be heavy.

    $( 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>

1) Add onchange attribute to each inputs. 2) At JS file,make a global collection of inputs. 3) At the changed() function find the index of changed input. 4) Change the class of next input.

You're pretty close, the blur event is the right way to do this.

Here's a working example for you to look at.

$(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>

If you can modify the HTML, I would add a class to all the input fields you want to target, otherwise you might be tripped up by a hidden field or another input you didn't want to target.

$(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');
            }
        }
    });
})

This should set the pulse animation on next sibling fields that are not already filled out as you go through the form.

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>