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

Question

I have a modal with ~20 input and select fields that the user is supposed to complete. I would like to a quick JavaScript check whether the field is empty or not after the user is navigating away / changing / etc. the field, but want to avoid having to copy paste the code below 20 times and personalize it for each field.

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

Is there any way to have the code above check for any select / input field on my NewUserModal ?

Thank you!

EDIT

So I fiddled around with the suggested codes below but only the following managed to halfway work:

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

Empty fields are being flagged correctly now, but fields with content do not have the has-success class added. Note that I have to apply this class to the <div class="input-group"> element instead of the input select fields.

Any suggestions? I am running on bootstrap 3 if that helps.

EDIT 2

Still no result and quite frankly have had enough for today. - select fields are either ignored or incorrectly flagged with has-error if pre-populated - individual input fields seem to work more or less - grouped input fields nestled in one div all turn red if one field is empty (eg. phone number + phone country both turn red of there is not country code entered)

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

I basically would have to redo the whole design of my modal and I quite frankly dont want to go down that road. Not a fan of JS/ Jquery today.

Answer 1

Not really sure this is what you're looking for but, why do not simply make your code more universal:

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

EDIT

If you would like to specify a precise form, add an ID to your form :

<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

Add a new class to the input

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

and then in 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');
  }
});

I hope this works