Question

我正在对一系列输入框执行一些验证。我需要确保输入的值可以被6整除。

当用户尝试提交无效值时，所有其他输入都会被禁用，直到他们更正错误为止，然后会弹出一个Div解释问题。

我尝试的第一种方法是捕获Tab或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();
   } 
  }
 });

当用户使用Enter提交时，此方法可以正常工作，但如果他们选择了Tab，则会执行以下操作：

如果验证通过，则会在下一个文本框中再次触发
如果验证失败，焦点仍会移至下一个文本框
如果验证失败（并且用户已按Enter键），则当用户更正时，使用Tab重新提交时不会删除错误Div

第二种方法是使用Change事件：

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

这也适用于Enter，但这次如果在用户更正错误后按Tab键，则焦点不会传递到下一个文本框。

请参阅https://jsfiddle.net/bdgriffiths/sqrugh63/3/

（我也尝试使用以下方式执行验证：

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

哪个工作正常，但在每次击键后触发。即当输入“12”时，错误将在按下“1”后触发 - 这将是令人恼火的。）

Answer 1

原来它正在禁用正在搞砸的其他输入。

通过创建CSS类来解决此问题，使其他输入看起来禁用：

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

然后强制焦点停留在单元格中，直到验证错误得到纠正：

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

所以整个功能现在看起来像这样：

$(".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/

如何使Tab和Enter在一系列输入中表现相同？

1 个答案: