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>

Answer 2

您可以使用onfocus事件并创建一个名为hideerror的新函数，该函数将错误div的textContent设置为空白（空字符串）。当您单击文本框上的（焦点）时，onfocus事件将触发。

我建议您使用.textContent而不是.innerHTML，因为在显示错误消息时您不会附加任何HTML。

请参见下面的工作示例：

<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" data-error="errorname" onfocus="hideerror(this)" onblur="check();" value="" style="width:455px; background-color:#EEEEEE;">
  </div>
  <div id="errorname"></div>
</form>

<script>
  function check() {
    if (document.getElementById('email_3').value == '' || !document.getElementById('email_3').value.length) {
      document.getElementById('errorname').textContent = "this is an invalid name";
    }
  }
  
  function hideerror(elem) {
    document.getElementById(elem.dataset.error).textContent = "";
  }
</script>

Answer 3

您可以更改错误的可见性，而不是不断更改其内容。为focus事件添加事件侦听器，该事件侦听器将隐藏错误，并更改blur事件的事件侦听器，以在值无效时显示错误，否则将其隐藏。

var errorDom = document.querySelector("#errorname");
var email3 = document.querySelector("#email_3");
email3.addEventListener("focus", hideError);
email3.addEventListener("blur", check);
hideError();

function check() {
  hideError(email3.value);
}

function hideError(flag) {
  errorDom.style.display = flag ? "none" : null;
}

<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" value="" style="width:455px; background-color:#EEEEEE;">
  </div>
  <div id="errorname">This is an invalid name</div>

Answer 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<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="hide();"
               value="" style="width:455px; background-color:#EEEEEE;">
    </div>
    <div id="errorname"></div>
</form>

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

</body>
</html>

Answer 5

我在onblur和oninput上调用了检查功能，因此当值更新时，吐司将在有效时被删除。

以下是更新的代码段：

function check() {
  let email = document.getElementById('email_3');
  let errorText = document.getElementById('errorname');
  errorText.textContent = !!email.value ? "" : "This is an invalid name";
}

<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" oninput="check()" onblur="check()" value="" style="width:455px; background-color:#EEEEEE;">
  </div>
  <div id="errorname"></div>

希望这会有所帮助

使用onblur显示和隐藏字段下方的消息

5 个答案: