javascript - 使用 onblur 在字段下方显示和隐藏消息

Question

我有一个表单，如果用户在字段内单击然后又从中退出，我想显示一条错误消息。我有这段代码，它运行良好

<form action="sign_in.php" method="post" id="sign_in_form">
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Email Address</label>
    <input type="text" name="email_3" id="email_3" class="form-control form-control-lg" onblur="check();"
    value="" style="width:455px; background-color:#EEEEEE;">
  </div>
  <div id="errorname"></div>

<script>
function check(){
     if(document.getElementById('email_3').value=='' || !document.getElementById('email_3').value.length){
          document.getElementById('errorname').innerHTML="this is an invalid name";
      }
}
</script>

现在的问题是，如果我在该字段内再次单击，消息仍然可用。如果再次在内部单击，我需要删除消息，直到我在字段外部单击消息再次出现。我怎么能那样做？

Answer 1

使用focus事件清空错误元素

function check() {
  if (document.getElementById('email_3').value == '' || !document.getElementById('email_3').value.length) {
    document.getElementById('errorname').innerHTML = "this is an invalid name";
  }
}
function empty() {
    document.getElementById('errorname').innerHTML = "";
 
}

<form action="sign_in.php" method="post" id="sign_in_form">
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Email Address</label>
    <input type="text" name="email_3" id="email_3" class="form-control form-control-lg" onblur="check();" onfocus="empty()" value="" style="width:455px; background-color:#EEEEEE;">
  </div>
  <div id="errorname"></div>

更新:为了更容易多次使用 jquery

$(document).on('blur','.validate',function(){
  if(!$.trim($(this).val())){
    $(this).closest('.form-group').find('.errorname').show();
    $(this).addClass('error_show')
  }
}).on('focus','.validate',function(){
   $(this).closest('.form-group').find('.errorname').hide()
   $(this).removeClass('error_show')
})

.errorname{
 display:none;
}
.validate:hover,.validate:focus{
 border: 3px solid #EEA730
}
.error_show:hover{
 box-shadow: 0 0 0 3px #EEA730 !important;
 border:1px solid red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="sign_in.php" method="post" id="sign_in_form">
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Email Address</label>
    <input type="text" name="email_3" id="email_3" class="form-control form-control-lg validate"  value="" style="width:455px; background-color:#EEEEEE;">
      <div class="errorname">error 1</div>
  </div>
  
 <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Email Address</label>
    <input type="text" name="email_3" id="email_3" class="form-control form-control-lg validate"  value="" style="width:455px; background-color:#EEEEEE;">
      <div class="errorname">error 2</div>
  </div>
  <div class="form-group">
    <label for="email" style="font-weight: bold; cursor: text;"><span style="color:red;">* </span>Email Address</label>
   <select name="email_3" id="email_3" class="form-control form-control-lg validate"  value="" style="width:455px; background-color:#EEEEEE;">
   <option></option>
    <option value="ss">one</option>
   </select>
      <div class="errorname">error 2</div>
  </div>