show and hide message below field using onblur

Question

I have a form and I want to show an error message if a user has clicked inside the field and then out of it. I have this code and it works perfectly

<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>

Now the problem is that if I clicked again inside the field the message is still available. I need to remove the message if clicked inside again until I clicked outside of the field the message comes again. How could I do that?

prasanth · Accepted Answer · 2019-02-21T10:10:41.897

use focus event for empty the error element

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>

UPDATED:For Multiple use jquery for more easy

$(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>

You should use `textContent` in this situation, it would be faster than `innerHTML` (https://stackoverflow.com/questions/21311299/nodevalue-vs-innerhtml-and-textcontent-how-to-choose) — Miroslav Glamuzina, Feb 19 '19 at 12:00
@MiroslavGlamuzina .Ya u r right and Thank.But we don't know him to add string or some html content for error throwing .Thats why — prasanth, Feb 19 '19 at 12:06
@prasanth Isn't having the text and/or html in the html rather than updating it with JS better? You can just change the display of the style — nick zoum, Feb 19 '19 at 12:13
Ok, what if I have multiple fields with a different message and different message place? Should I do many functions? — Black P, Feb 20 '19 at 07:39
Works fine !! Ok, what if I need to add styles. Meaning that I need the field `border: 3px solid #EEA730` when `hover` and `focus`, and if I click out of the field, I need to show `border: 1px solid red` and if I hover without clicking I need to show both `border: 1px solid red` and `box-shadow: 0 0 0 3px #EEA730` and if I click I want to remove `border: 1px solid red` and show only `box-shadow: 0 0 0 3px #EEA730`. I hope you understand me :( Please... — Black P, Feb 20 '19 at 10:24
WOW !! Literally you are the best ever everything is working as it should. Thank you so much !! 100% accepted answer. — Black P, Feb 20 '19 at 16:12
Oh, I discovered a problem. In option and select the message is shown but when I choose an option the message is not gone ... it only works on inputs and textarea ... — Black P, Feb 21 '19 at 09:56
Please how can I add to this `$(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') })` email validation like fliter_validate_email for php but for jquery so if it is empty or the email is not valid show the message ... — Black P, Feb 26 '19 at 17:20

Nick Parsons · Answer 2 · 2019-02-20T09:56:52.307

You can use the onfocus event and create a new function called hideerror which sets the textContent of your error div to blank (empty string). The onfocus event will fire when you click (focus) on your textbox.

I recommend that you use .textContent instead of .innerHTML as you are not appending any HTML when you display your error message.

See working example below:

<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>

@BlackP no, you only need one function. Instead, add a `data-error` attribute to your input and set it equal to the `id` of where you want the error to display for that particular input. Then update your function call like I have above — Nick Parsons, Feb 20 '19 at 09:58

nick zoum · Answer 3 · 2019-02-19T11:57:09.180

You could just change the visibility of the error instead of constantly changing its contents. Add an event listener for the focus event that will hide the error and change the event listener for the blur event to show the error when the value is invalid and hide it otherwise.

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>

score 0 · Answer 4 · answered Feb 19 '19 at 11:47

<!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>

You should use `textContent` in this situation, it would be faster than `innerHTML` (https://stackoverflow.com/questions/21311299/nodevalue-vs-innerhtml-and-textcontent-how-to-choose) — Miroslav Glamuzina, Feb 19 '19 at 12:00

score 0 · Answer 5 · answered Feb 19 '19 at 11:55

I've called the check function on onblur and oninput, so when the value is updated the toast will be removed when it becomes valid.

Below is an updated snippet:

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>

Hope this helps,

show and hide message below field using onblur

5 Answers5