Валидация формы JavaScript . HELP

const form = document.querySelector('.box');
let fields = form.querySelectorAll('.field');
const login = document.getElementById('#login');
const password = document.getElementById('#password');
const btnvalidation = document.getElementById('#btnvalidation');


form.addEventListener('submit', (event) => {
    event.preventDefault();
    checkInputs();
})

function checkInputs(){
 //Получаем строку из инпута
const loginValue = login.value.trim();
const passwordValue = password.value.trim();

if(loginValue === ''){
setErrorFor(login,'Поле Логин обязательно для заполнения');
}else{
setSuccessFor(login);
}

if(passwordValue === ''){
  setErrorFor(password,'Поле Пароль обязательно для заполнения');
}else{
  setSuccessFor(password)
}
}

function setErrorFor(input,message){
const formconrol = input.parentElement;
const small = input.querySelector('small');

small.innerHTML = message;

formconrol.className = 'form-conrol error';
}
function setSuccessFor(input){
const formconrol = input.parentElement;
formconrol.className = 'form-conrol success';
  }

 <div class="container">
    <div class="row">
      <div class="col-md-6">

        <form class="box">
          <h1>Авторизация</h1>
          <div class="container">

            <!-- Social buttons -->
            <ul class="list-unstyled list-inline text-center">
              <li class="list-inline-item">
                <a class="btn-floating btn-fb mx-1" href="https://www.facebook.com/">
                  <img src="./images/facebook.svg" alt="" style="height: 45px; width: 45px;">
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn-floating btn-tw mx-1" href="https://www.vk.com">
                  <img src="./images/vk.svg" alt="" style="height: 45px; width: 45px;">
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn-floating btn-gplus mx-1" href="https://www.instagram.com/">
                  <img src="./images/insta.svg" alt="" style="height: 45px; width: 45px;">
                </a>
              </li>
              <li class="list-inline-item">
                <a class="btn-floating btn-li mx-1" href="https://www.google.com/">
                  <img src="./images/google.svg" alt="" style="height: 45px; width: 45px;">
                </a>
              </li>

            </ul>
            <!-- Social buttons -->

          </div>
          <div class="form-conrol">
             <input class="field" type="text" id="login" placeholder="ЛОГИН">
            <small></small>
          </div>
          <div class="form-conrol"> 
            <input class="field" type="password" id="password" placeholder="ПАРОЛЬ">
            <small></small>
          </div>

          <!-- <i class="fas fa-check-circle"></i> 
            <i class="fas fa-exclamation-circle"></i> -->

          <a class="forgot text-muted" href="#">Забыли пароль?</a>
          <input type="submit" id="btnvalidation" value="Войти" href="#">
        </form>

      </div>
    </div>
  </div>