Question

I’m trying to create a form that allows the user to input values, for an order form. When the form is loaded, it needs to highlight all the rows that have nothing in them, or where the value is more than 100, then unhighlight them when this is corrected.

Also, there is a submit button – this needs to be disabled when any of the text boxes are highlighted

Here’s the code i have so far – does anyone have any ideas?

$(':text').focusin(function() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
});

$(':text').change(function() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
});

Answer 1

I think this does the trick nicely, http://jsfiddle.net/fr85u/

HTML

<form>
  <input />
  <input value="101"/>
  <input value="99"/>
  <button disabled="disabled"> submit </button>
</form>

JS

$('input').each(function(){
  var $this = $(this),
      val = $this.val();

  if(val > 100 || val === ''){
     $this.addClass('red');
  }
}).on('blur', function(){
  var $this = $(this),
      val = $this.val();

  $this.toggleClass('red', val === '' || val > 100);

  $('button').prop('disabled', $("input.red").length > 0);  
});

CSS

.red{
   background-color: red;
}