Javascript style empty input boxes

Question

I have a dynamically created list of inputs. I would like them to be:

1) red if they are required and empty.
2) yellow if they are not required but empty.
3) green if they contain a value.

I tried this:

<style>
.empty {
    background: yellow;
    }
.not-empty {
    background: green;}
input:invalid { 
    background: red;
    }
</style>
<script>
jQuery('input').blur(function(){
    tmpval = jQuery('input').val();
    if(tmpval == '') {
        jQuery('input').addClass('empty');
        jQuery('input').removeClass('not-empty');
    } else {
        jQuery('input').addClass('not-empty');
        jQuery('input').removeClass('empty');
    }
});
</script>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Apr 05 '18 at 22:36
Also did you do something to rename jQuery? Because otherwise `Jquery` is not the correct case. — Taplar, Apr 05 '18 at 22:39
Thats funny, it had been a long day and I just copy and pasted those over the $ I had because I'm using it on WP so ultimately they needed to be jQuery. — Shane, Apr 06 '18 at 17:43

Mark Schultheiss · Accepted Answer · 2018-04-06T03:16:46.060

Pretty simple, a somewhat verbose example so you see what is going on. .trigger() to set initial values. Added some dynamic inputs also.

jQuery('.myinputs').on('change','input.pretty', function() {
  let tmpval = $(this).val();
  let hasNoValue = tmpval == '';
  let isRequired = $(this).prop('required');
  $(this).toggleClass('empty', hasNoValue);
  $(this).toggleClass('not-empty', !hasNoValue);
  $(this).toggleClass('invalid', hasNoValue && isRequired);
})
$('.myinputs').append('<input class="pretty" type="text" />').append('<input class="pretty" type="text" required="true" />').append('<input class="pretty" type="text" required="true" value="dynamic" />');
$('input.pretty').trigger('change');

.empty {
  background-color: yellow;
}

.not-empty {
  background-color: #99FF99;
}

.invalid {
  background-color: #FF9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myinputs">
<input class="pretty" type="text" />
<input class="pretty" type="text" />
<input class="pretty" type="text" required="true" />
<input class="pretty" type="text" required="true" />
<input class="pretty" type="text" value="howdy" />
<input class="pretty" type="text" />
</div>

This works when I change the values manually, but when the values are dynamically loaded from another script it does not change. — Shane, Apr 07 '18 at 00:02
The key here is where you attach the event handler, you have to attach it to an existing container - as close as possible to your new elements as I did with the div wrapper. Worst case, body or document. — Mark Schultheiss, Apr 07 '18 at 11:49

score 0 · Answer 2 · edited Apr 05 '18 at 22:57

0

You can use plain css for the most of it. But detecting user inputted value is not possible with this, but this answer should help you further.

input[required] {
  background: red;
}

input {
  background: yellow;
}

input[value] {
  background: green;
}

<input type="text" required>
<input type="text">
<input type="text" value="text">

edited Apr 05 '18 at 22:57

VXp

11,598
6
31
46

answered Apr 05 '18 at 22:43

Sebastian Speitel

7,166
2
19
38

jerome · Answer 3 · 2018-04-06T01:56:32.430

Use the event handler .change() to monitor the input values then add your conditions inside .each() so it will be applied to all inputs once a button is pressed in one input

  function checkChanges(){
    $("input").each(function(){
      if($(this).prop('required') && !$(this).val()){
      $(this).addClass('red');
    }
    else{
      $(this).removeClass('red');
    }
    
    if(!$(this).prop('required') && !$(this).val()){
      $(this).addClass('yellow');
    }
    else{
      $(this).removeClass('yellow');
    }
    
    if($(this).val()){
      $(this).addClass('green');
    }
    else
    {
      $(this).removeClass('green');
    }
    });
  }

  $("input").on('change',function(){
     checkChanges();
  });
  
  $(".create").on('click',function(){
    var str = "<input type='text'  class = 'inp' required='required' " + "onchange = 'checkChanges()'><input type='text' class = 'inp' " +
    "onchange = 'checkChanges()> " +
      "<input type='text' class = 'inp' onchange = 'checkChanges()>";
      
      $(".holder").append(str);
  });

input.red {
  background: red;
}

input.yellow {
  background: yellow;
}

input.green {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'holder'>
<input type="text"  class = 'inp' required='required'>
<input type="text" class = 'inp' >
<input type="text" class = 'inp'>

</div>
<br>
1) red if they are required and empty.<br>
2) yellow if they are not required but empty.<br>
3) green if they contain a value.

<button class = 'create'>GENERATE INPUTS</button>

Javascript style empty input boxes

3 Answers3