How Can I Make Tab And Enter Behave The Same In A Series Of Inputs?

I am performing some validation on a series of input boxes. I need to ensure that a value entered is divisible by 6. When the user tries to submit an invalid value, all other input

Solution 1:

Turns out it was disabling the other inputs that was screwing this up.

Solved the issue by creating a CSS class to make the other inputs look disabled:

.disabledClass {
  background-color: #eee;
  color: #ccc;
  border: 1px solid #ccc;
}

And then force the focus to stay in the cell until the validation error is corrected:

$(this).focus().select();

So the whole function now looks like this:

$(".test2").blur(function() { 
    var valid = true;
    if (parseInt($(this).val()) % 6 != 0) {
      valid = false;
      $('#errorMessage').html("That's not divisible by 6");
    }
    if ((valid) || (!($(this).val()))) { // valid or blank
      // Hide error message and enable other text boxes
      $("#validation").fadeOut(500);
      $('input').not(this).removeClass('disabledClass');
    } else { // not valid
      // Show error message and disable other text boxes
      var position = $(this).position();
      $('input').not(this).addClass('disabledClass');
      $("#validation").fadeIn(500);
      $("#validation").offset({
        top: position.top,
        left: position.left + $(this).width()
      });
      $(this).focus().select();
    }
  });

https://jsfiddle.net/bdgriffiths/sqrugh63/9/