Display my error on blur input field

1

I have an input field and i want to display and error message when they dont have an input field. i have manage to do that but not able to add my style to it. I want the error message style to appear when the user dont have an input field when leaves it empty.
here is my html markup

<div class="form_label">
            <label>Name</label>
            <input type="text" placeholder="Name" name="name" id="name">
            <span id="error_name"></span>
          </div>

here is my style

#error_name{
  color: red;
  background-color: #f4f2f2;
  border-left: 3px solid #fc6a6a;
  padding: 10px;
  position: relative;
  top: 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  font-family: 'Roboto', sans-serif;
}

here is my vanilla javascript code.

function validateName(){
  var elName = document.getElementById('name').value;
  var elErrorName = document.getElementById('error_name');
  var regexNameFormat = '^[a-zA-Z\s, ]+$'; //regex format for name fullname and lastname with space
  if( elName == "" || elName == null ){
    elErrorName.innerText = "Please Provide Your Full Name and Last Name";
    return false;
    }if( elName.match(regexNameFormat)){
      elErrorName.innerHTML = '';
    }else{
      elErrorName.innerText = "Valid Name and Last Name";
      elErrorName.style.color = 'green';
      return false;
    }
  return true;
};
document.getElementById('name').addEventListener('blur', function(){
  validateName();
});
2

here is the screenshot of what i want…

46 AM
46 AM924Ă—254 8.21 KB

3

What part is giving you trouble? I tried pasting your above code into JSBin. I noticed that your logic right now might be backward fro the second if and the else.

These are the results I’m seeing:

  • leave the input empty: get the error
    image
  • put in a name: no error
    image
  • put in non-name characters: get a green message
    image
4

Hi Ariel, when the user does blur out of focus should have the red warning when puts something should have the green as ok. for now just want that to happen. like if i have empty show red have something cuts the style leave part of the style.

5

If the part that you are trying to fix is the green text when the user enters something, then you need to change your if / else as I mentioned. The other issue that you might notice is that once you have changed the text to green, it doesn’t change back. For example: if the user enters something in the input and blurs it will give the green ok message. If the user then deletes the text and blurs again, the error message will show but it will still be green. You can explicitly toggle the text color (see example below), but my advice would be to have a “success” class and a “error” class and toggle between those.
Here is a JSBin with your slightly modified code.

6

the red tip still there…when i have some content need to get rid off it not hidding the whole style

7

If you want to hide the whole span element you can use visibility: hidden or display: none. Look into the difference between these two methods.

1 Like
8

i actually did it already, yes i had a bug on my regext file that is why wont take the whole… style off got it… thank you so much…