Check if an input is filled or not

I’m pretty new to Javascript and I have an issue checking if an input is filled or not.

So here is the problem: I have a label which is over the input (position: absolute). On focus and when the input is filled the label go to the top of the input. But if I remove the text on the input, the label stay on the top of the input.

So I need something to check if the input is filled but my solution isn’t working. (the label should go back to the center of the input)

Any help will be appreciate šŸ™‚

document.querySelector('.form__input').addEventListener('blur', onInputBlur);

function onInputBlur(ev) {

  if (ev.target && ev.target.value) {
    console.log('is-full');
    ev.target.classList.add('input--filled');
  }

}
/* FORM WRAPPER */

.form__input--wrapper {
  width: 250px;
  position: relative;
  height: 2rem;
  margin: 3rem 0;
}


/* FORM INPUT */

.form__input {
  position: relative;
  background-color: transparent;
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid deeppink;
  font-size: 15px;
}

.form__input:focus {
  outline: none;
}

.form__input:focus+.form__label,
.input--filled+.form__label {
  top: -100%;
  align-items: flex-end;
  text-transform: uppercase;
  font-size: 11px;
}

.form__input:focus+.form__label::after,
.input--filled+.form__label::after {
  width: 100%;
  bottom: calc(-100% - 0.2rem);
}


/* FORM LABEL */

.form__label {
  position: absolute;
  top: 0;
  left: 0;
  color: #404d5b;
  display: flex;
  align-items: center;
  transition: 0.3s;
  z-index: -1;
  line-height: 1;
  font-family: Raleway;
  font-weight: 500;
  font-size: 15px;
  height: 100%;
  width: 100%;
}

.form__label::after {
  width: 0;
  height: 0.2rem;
  background-color: deeppink;
  position: absolute;
  transition: 0.3s;
  content: '';
  left: 0;
  bottom: -0.2rem;
}
<form class="form-wrapper">

  <div class="form__input--wrapper">
    <input type="text" class="form__input">
    <label for="name" class="form__label" id="a">My awesome label</label>
  </div>

</form>


Just remove the class in your event listener again.

document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );

function onInputBlur( ev ) {

	if(ev.target && ev.target.value) {
  	console.log('is-full');
		ev.target.classList.add('input--filled');
	} else {
        console.log('is-empty');
        ev.target.classList.remove('input--filled');
    }

}
/* FORM WRAPPER */

.form__input--wrapper{
  width: 250px;
  position: relative;
  height: 2rem;
  margin: 3rem 0;
}

/* FORM INPUT */

.form__input{
  position: relative;
  background-color: transparent;
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid deeppink;
  font-size: 15px;
}

.form__input:focus{
  outline: none;
}

.form__input:focus + .form__label,
.input--filled + .form__label{
  top: -100%;
  align-items: flex-end;
  text-transform: uppercase;
  font-size: 11px;
}

.form__input:focus + .form__label::after, .input--filled + .form__label::after{
  width: 100%;
  bottom: calc(-100% - 0.2rem);
}

/* FORM LABEL */

.form__label{
  position: absolute;
  top: 0;
  left: 0;
  color: #404d5b;
  display: flex;
  align-items: center;
  transition: 0.3s;
  z-index: -1;
  line-height: 1;
  font-family: Raleway;
  font-weight: 500;
  font-size: 15px;
  height: 100%;
  width: 100%;
}

.form__label::after{
  width: 0;
  height: 0.2rem;
  background-color: deeppink;
  position: absolute;
  transition: 0.3s;
  content: '';
  left: 0;
  bottom: -0.2rem;
}
<form class="form-wrapper">

  <div class="form__input--wrapper">
    <input type="text" class="form__input">
    <label for="name" class="form__label" id="a">My awesome label</label>
  </div>
  
</form>

You should add ev.target.classList.remove(‘input–filled’); if your field is empty

document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );

function onInputBlur( ev ) {

	if(ev.target && ev.target.value) {
  	console.log('is-full');
		ev.target.classList.add('input--filled');
	} else {
         ev.target.classList.remove('input--filled');
    }

}
/* FORM WRAPPER */

.form__input--wrapper{
  width: 250px;
  position: relative;
  height: 2rem;
  margin: 3rem 0;
}

/* FORM INPUT */

.form__input{
  position: relative;
  background-color: transparent;
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid deeppink;
  font-size: 15px;
}

.form__input:focus{
  outline: none;
}

.form__input:focus + .form__label,
.input--filled + .form__label{
  top: -100%;
  align-items: flex-end;
  text-transform: uppercase;
  font-size: 11px;
}

.form__input:focus + .form__label::after, .input--filled + .form__label::after{
  width: 100%;
  bottom: calc(-100% - 0.2rem);
}

/* FORM LABEL */

.form__label{
  position: absolute;
  top: 0;
  left: 0;
  color: #404d5b;
  display: flex;
  align-items: center;
  transition: 0.3s;
  z-index: -1;
  line-height: 1;
  font-family: Raleway;
  font-weight: 500;
  font-size: 15px;
  height: 100%;
  width: 100%;
}

.form__label::after{
  width: 0;
  height: 0.2rem;
  background-color: deeppink;
  position: absolute;
  transition: 0.3s;
  content: '';
  left: 0;
  bottom: -0.2rem;
}
<form class="form-wrapper">

  <div class="form__input--wrapper">
    <input type="text" class="form__input">
    <label for="name" class="form__label" id="a">My awesome label</label>
  </div>
  
</form>

You have to remove the class if the the input is empty – see demo below:

document.querySelector('.form__input').addEventListener('blur', onInputBlur);

function onInputBlur(ev) {

  if (ev.target && ev.target.value.trim().length > 0) {
    ev.target.classList.add('input--filled');
  } else {
    ev.target.classList.remove('input--filled');
  }

}
/* FORM WRAPPER */

.form__input--wrapper {
  width: 250px;
  position: relative;
  height: 2rem;
  margin: 3rem 0;
}


/* FORM INPUT */

.form__input {
  position: relative;
  background-color: transparent;
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid deeppink;
  font-size: 15px;
}

.form__input:focus {
  outline: none;
}

.form__input:focus+.form__label,
.input--filled+.form__label {
  top: -100%;
  align-items: flex-end;
  text-transform: uppercase;
  font-size: 11px;
}

.form__input:focus+.form__label::after,
.input--filled+.form__label::after {
  width: 100%;
  bottom: calc(-100% - 0.2rem);
}


/* FORM LABEL */

.form__label {
  position: absolute;
  top: 0;
  left: 0;
  color: #404d5b;
  display: flex;
  align-items: center;
  transition: 0.3s;
  z-index: -1;
  line-height: 1;
  font-family: Raleway;
  font-weight: 500;
  font-size: 15px;
  height: 100%;
  width: 100%;
}

.form__label::after {
  width: 0;
  height: 0.2rem;
  background-color: deeppink;
  position: absolute;
  transition: 0.3s;
  content: '';
  left: 0;
  bottom: -0.2rem;
}
<form class="form-wrapper">

  <div class="form__input--wrapper">
    <input type="text" class="form__input">
    <label for="name" class="form__label" id="a">My awesome label</label>
  </div>

</form>

you need a else to remove the class