如何隐藏错误消息时在jQuery的

Question

按键我有以下的HTML和jQuery函数来验证输入。我想，当按任意键隐藏错误消息。那么如何做到这一点。请帮我写按键功能。谢谢。

 function Validate() { 
 
      var isAllValid = true; 
 
      $('.error').hide(); 
 
      $('#error').empty(); 
 
      $('.form-group').removeClass('has-error'); 
 

 
      if ($('#FName').val().trim() == "") { 
 
       $('#FName').focus(); 
 
       $('#FName').siblings('.error').show(); 
 
       $('#FName').parents('.form-group').addClass('has-error'); 
 
       isAllValid = false; 
 
      } 
 
      if ($('#Email').val().trim() != "" || $('#Email').val().trim() =="") { 
 

 
       var expr = /^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
 
       if (!expr.test($('#Email').val().trim())) { 
 
        $('#Email').focus(); 
 
        $('#Email').siblings('.error').show(); 
 
        $('#Email').parents('.form-group').addClass('has-error'); 
 
        isAllValid = false; 
 
       } 
 
      } 
 
      return isAllValid; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
      <label for="LName" class="col-sm-2 control-label">First Name</label> 
 
      <div class="col-sm-10"> 
 
       <input type="text" class="form-control" id="LName" placeholder="Last Name"> 
 
       <span class="error">**Please provide Last Name...</span> 
 
      </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <label for="Email" class="col-sm-2 control-label">Email Address</label> 
 
      <div class="col-sm-10">

Answer 1

$(document).keypress(function(e) { 
 
    $('.error').hide(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text"> 
 
<div class="error">please enter value</div>

Answer 2

使用jQuery的focusinfocusout事件

$("#FName").focusin(function(){ 
    $(".error").hide(); 
}); 

$("#FName").focusout(function(){ 
    if($(this).val() === ""){ 
    $(".error").show(); 
    }else{ 
    $(".error").hide(); 
    } 
}); 

举个例子

$(document).ready(function(){ 
 

 
$("#FName").focusin(function(){ 
 
    $(".error").hide(); 
 
}); 
 

 
$("#FName").focusout(function(){ 
 
    if($(this).val() === ""){ 
 
    $(".error").show(); 
 
    }else{ 
 
    $(".error").hide(); 
 
    } 
 
}); 
 

 
    
 
}); 
 

 

 
function Validate() { 
 
      var isAllValid = true; 
 
      $('.error').hide(); 
 
      $('#error').empty(); 
 
      $('.form-group').removeClass('has-error'); 
 

 
      if ($('#FName').val().trim() == "") { 
 
       $('#FName').focus(); 
 
       $('#FName').siblings('.error').show(); 
 
       $('#FName').parents('.form-group').addClass('has-error'); 
 
       isAllValid = false; 
 
      } 
 
      if ($('#Email').val().trim() != "" || $('#Email').val().trim() =="") { 
 

 
       var expr = /^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
 
       if (!expr.test($('#Email').val().trim())) { 
 
        $('#Email').focus(); 
 
        $('#Email').siblings('.error').show(); 
 
        $('#Email').parents('.form-group').addClass('has-error'); 
 
        isAllValid = false; 
 
       } 
 
      } 
 
      return isAllValid; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
      <label for="LName" class="col-sm-2 control-label">First Name</label> 
 
      <div class="col-sm-10"> 
 
       <input type="text" class="form-control" id="FName" placeholder="First Name"> 
 
       <span class="error">**Please provide First Name...</span> 
 
      </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <label for="Email" class="col-sm-2 control-label">Email Address</label> 
 
      <div class="col-sm-10">

Answer 3

尝试keyup

$('.userInput').keyup(function() { 
    $('.error').hide(); 
}); 

jsfiddle