修改

Question

我有一个带有~20个输入的模态，并选择用户应该完成的字段。我希望在用户导航/更改/等等字段后快速检查字段是否为空，但是要避免必须复制粘贴代码20次以下并为每个字段对其进行个性化处理。 / p>

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

Answer 2

在输入中添加新类

<input type="text" class="form-control Input-to-verify" maxlength="5" placeholder="What is your Holidex code?" id="addHolidex" name="addHolidex" style="text-transform:uppercase" />

然后在javascript中：

   $('.Input-to-verify').on('change',function(){
   if ($(this).val() == '') {
    $(this).removeClass('has-success').addClass('has-warning');
  } else {
    $(this).addClass('has-success').removeClass('has-warning');
  }
});

我希望这有效

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

2 个答案:

修改