检查输入字段的值并添加一个类

Question

我有两个输入字段和一个提交按钮(显示为内联).在填写输入字段后,我正在尝试向下一个兄弟添加一个类.因此,如果填写了第一个名称输入字段,则在电子邮件输入字段中添加一个类,如果填写了电子邮件输入字段,则将类添加到下一个输入字段,依此类推......

到目前为止这是我的代码:

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

Answer 1

将除提交按钮之外的所有输入都添加到集合中.

在输入时,根据当前输入是否具有值来切换下一个输入的类:

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

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

小提琴

片段:

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>