javascript - 成功验证后无需单击按钮即可删除验证错误消息

Question

我有一个简单的表单，有四个字段。我的问题是，即使在没有任何点击事件的情况下提供有效输入后，表单验证错误消息也不会被删除。

下面是我使用按键事件来获得解决方案的示例，但由于键盘和数字键盘的键码不同。有没有其他方法可以在成功验证输入后立即删除错误消息，而无需按键事件和按钮单击。下面是我尝试过的单个字段电话号码的示例代码。

下面是示例: http://jsfiddle.net/e203dLLL/

//Code to remove error msgs after giving valid input with keypress event.

$(".error").hide();
$(".validate").keypress(function(event) {

  var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

  // Allow: backspace, delete, tab, and enter
  var controlKeys = [8, 9, 13];
  //for mozilla these are arrow keys
  if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

  // Ctrl+ anything or one of the conttrolKeys is valid
  var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

  if (isControlKey) {
    return;
  }

  // stop current key press if it's not a number
  if (!(48 <= key && key <= 57)) {
    event.preventDefault();
    return;
  }
});

$('.validate').keyup(function() {

  var regex = new RegExp(/[^0-9]/g);
  var containsNonNumeric = this.value.match(regex);
  if (containsNonNumeric)
    $(".error").show();
  else $(".error").hide();
  //this.value = this.value.replace(regex, '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Sample form with one field.
<form>
  Phone Number: <input type="text" name="firstname" class="validate">
  <div class="error"> Error! Only numericals allowed.</div>
</form>

如果除了按键事件和不点击按钮之外还有其他选择，请提供姓名、电子邮件和密码的详细解决方案。

Answer 1

您可以使用 $.focusout() 事件来处理这种情况

例如: http://jsfiddle.net/v6ybua3j/

$(".error").hide();
$(".validate").keypress(function (event) {

        var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

        // Allow: backspace, delete, tab, and enter
        var controlKeys = [8, 9, 13];
        //for mozilla these are arrow keys
        if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

        // Ctrl+ anything or one of the conttrolKeys is valid
        var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

        if (isControlKey) {return;}

        // stop current key press if it's not a number
        if (!(48 <= key && key <= 57)) {
            event.preventDefault();
            return;
        }
    });

$('.validate').focusout(function () {

    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = this.value.match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
      //this.value = this.value.replace(regex, '');
});

另一种解决方案是使用 setInterval()

代码:http://jsfiddle.net/axLg8oqt/

$(".error").hide();

setInterval(function(){
    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = $('.validate').val().match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
},300)