如何使Tab和Enter在一系列输入中的行为相同？

Question

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 inputs are disabled until they correct the error, and a Div pops up explaining the issue.

The first approach I tried was capturing a keyup event of a Tab or Enter:

$(".test1").keyup(function(event) {
  if((event.keyCode == 9) || (event.keyCode == 13)) {
     event.preventDefault();      
   var valid = true;
   if(parseInt($(this).val()) % 6 != 0){
    valid = false;
    $('#errorMessage').html("That's not divisible by 6");
   }
   if (!valid){
    // Show error message and disable other text boxes
    var position = $(this).position();
    $('input').not(this).prop('disabled', true);
    $("#validation").show();
    $("#validation").offset({top:position.top, left:position.left + $(this).width()});
   } else {
    // Hide error message and enable other text boxes
    $("#validation").delay(200).hide();
    $('input').not(this).prop('disabled', false);
    $(this).parent().next().find('.test1').focus();
   } 
  }
 });

This works fine when the user submits with an Enter, but if they tab it does the following:

• If the validation is passed, it triggers again in the next text box
• If the validation fails, the focus still moves to the next text box
• If the validation failed (and the user had pressed enter) when the user corrects it the error Div is not removed when the resubmit using Tab

The second approach was to use the Change event:

$(".test2").change(function(){
 var valid = true;
 if(parseInt($(this).val()) % 6 != 0){
  valid = false;
  $('#errorMessage').html("That's not divisible by 6");
 }
 if (!valid){
  // Show error message and disable other text boxes
  var position = $(this).position();
  $('input').not(this).prop('disabled', true);
  $("#validation").show();
  $("#validation").offset({top:position.top, left:position.left + $(this).width()});
 } else {
  // Hide error message and enable other text boxes
  $("#validation").delay(200).hide();
  $('input').not(this).prop('disabled', false);
  $(this).parent().next().find('.test2').focus();
 } 
});

This also works fine with Enter, but this time if Tab is pressed after the user has corrected an error, focus is not passed onto the next text box.

See https://jsfiddle.net/bdgriffiths/sqrugh63/3/

(I also tried performing the validation using:

$('.test').on('input', function() {  ...Do the validation... }

Which works fine, but triggers after each keystroke. ie When entering "12" the error would trigger after the "1" was pressed - which would be irritating.)

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