Проверка полей на заполненность

У меня есть простая форма регистрации. Хочу в случае если пользователь не заполнил одно из полей, выводить сообщение. Новичок в js, поэтому немного запутался в функции проверки.

HTML:

  <form class = 'login-form'>
  <div class = "flex-row">
  <input name = "username" class='lf--input' placeholder='Имя пользователя' type='text'>
  </div>
  <div class = "flex-row">
  <input name = "password" class='lf--input' placeholder='Пароль' type='password'>
  </div>
  <button type = "button" class='lf--submit' onclick="alerted();"> Войти </button>
  <button type = "button" class='lf--forgot' onclick="openForm()"> Регистрация</button>
  </form>

JS:

function alerted() {

  {
    valid = true;

    if (document.getElementById("username") == "") {
      alert ("Пожалуйста заполните поле.");
      valid = false;
    }

    return valid;
  }
}