JavaScript - 检测当前模式上任何输入/选择字段的输入更改

Question

我有一个包含约 20 个输入的模式，并选择用户应该完成的字段。我想在用户离开/更改/等字段后快速使用 JavaScript 检查该字段是否为空，但希望避免复制粘贴代码低于 20 次并对每个字段进行个性化设置。

<!-- Holidex -->
<label>Holidex:</label>
<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-bars"></i></span>
    <input type="text" class="form-control" maxlength="5" placeholder="What is your Holidex code?" id="addHolidex" name="addHolidex" style="text-transform:uppercase" />
</div>
<!-- /.Holidex -->

<script type="text/javascript">
$('#addHolidex').on('keyup keydown keypress change paste', function() {
  if ($(this).val() == '') {
    $('#addHolidex').removeClass('has-success').addClass('has-warning');
  } else {
    $('#addHolidex').addClass('has-success').removeClass('has-warning');
  }
});
</script>

有没有办法让上面的代码检查我的 NewUserModal 上的任何选择/输入字段？

谢谢!

编辑

所以我摆弄了下面建议的代码，但只有以下代码成功了一半:

$('.input-group').on('keyup keydown keypress change paste', function() {
   if ($(this).val() == '') {
    $(this).removeClass('has-success').addClass('has-error');
  } else {
    $(this).addClass('has-success').removeClass('has-error');
  }
});

现在可以正确标记空字段，但包含内容的字段没有 has-success添加了类。请注意，我必须将此类应用于 <div class="input-group">元素而不是 input select字段。

有什么建议吗？如果有帮助的话，我正在 bootstrap 3 上运行。

编辑2

仍然没有结果，坦率地说，今天已经受够了。- 选择字段被忽略或错误地标记为 has-error如果预先填充- 各个输入字段似乎或多或少起作用- 分组输入字段位于一个 div如果一个字段为空，则全部变为红色(例如，如果没有输入国家/地区代码，电话号码+电话国家/地区均变为红色)

// highlight empty fields in red
$('.input-group input, select').on('keyup keydown keypress change paste',function(){
   if ($(this).val() == '') {
    $(this).parent().closest('.input-group').removeClass('has-success').addClass('has-error');
  } else {
    $(this).parent().closest('.input-group').removeClass('has-error').addClass('has-success');
  }
});

我基本上必须重做我的模式的整个设计，坦率地说，我不想走这条路。今天不喜欢 JS/Jquery。

Answer 1

不太确定这就是您正在寻找的东西，但是为什么不简单地使您的代码更加通用:

$('input').on('keyup keydown keypress change paste', function() {
    if ($(this).val() == '') {
        $(this).removeClass('has-success').addClass('has-warning');
    } else {
        $(this).addClass('has-success').removeClass('has-warning');
    }
});

编辑

如果您想指定精确的表单，请在表单中添加 ID:

<form id="myForm">
    <label>Holidex:</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-bars"></i></span>
        <input type="text" class="form-control" maxlength="5" placeholder="What is your Holidex code?" id="addHolidex" name="addHolidex" style="text-transform:uppercase" />
    </div>
</form>

$('#myForm input').on('keyup keydown keypress change paste', function() {
    if ($(this).val() == '') {
        $(this).removeClass('has-success').addClass('has-warning');
    } else {
        $(this).addClass('has-success').removeClass('has-warning');
    }
});