<form action="" class="form" autocomplete="off">

  <h1 class="form__title">Создайте аккаунт</h1>

  <div class="form__field">
    <i class="fas fa-user"></i>
    <input class="form-field__input" id="username" type="text" placeholder="Имя пользователя">
    <i class="fas fa-check form-field__icon"></i>
  </div>
  <div class="form__field">
    <i class="fas fa-envelope"></i>
    <input class="form-field__input" id="email" type="email" placeholder="Электронная почта">
    <i class="fas fa-check form-field__icon"></i>
  </div>
  <div class="form__field">
    <i class="fas fa-lock"></i>
    <input class="form-field__input" id="password" type="password" placeholder="Пароль">
    <i class="fas fa-check form-field__icon"></i>
  </div>
  <button disabled="true" class="form__button" id="form__button">Регистрация</button>
</form>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;900&display=swap");

body,
html {
  background: #f3f3f6;
  font-family: "Rubik", sans-serif;
}

body {
  background: #dbdcda;
  padding: 40px;
}

.form {
  padding: 60px;
  background: #fff;
  position: relative;
  display: inline-block;
}

.form__title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 60px;
}

.form__field {
  padding: 10px;
  font-size: 16px;
  position: relative;
  background: #e5e5e5;
  margin-bottom: 20px;
}

i {
  width: 17px;
  color: #757575;
  text-align: center;
  margin-right: 3px;
}

.form-field__input {
  width: 300px;
  font-size: 16px;
  background: #e5e5e5;
}

.form__button {
  width: 100%;
  height: 56px;
  font-size: 20px;
  margin-top: 10px;
  transition: 0.3s;
  background: #ffcc00;
  font-family: "Rubik", sans-serif;
}

.form__button:hover {
  background: #ffd83e;
}

.form__button:disabled {
  cursor: default;
  background: #c1c1c1;
}

.form-field__icon {
  opacity: 0;
  color: #34ab00;
  transition: 0.3s;
}

.form-field__icon--active {
  opacity: 1 !important;
}
const mainFunction = (event) => {
  const form = document.querySelector(".form");
  const username = document.querySelector("#username");
  const email = document.querySelector("#email");
  const password = document.querySelector("#password");
  const formField = document.querySelectorAll(".form__field");
  const iconIconActive = "form-field__icon--active";

  const checkParams = (e) => {
    const button = document.querySelector("#form__button");
    const ID1 = username.value.length;
    const ID2 = email.value.length;
    const ID3 = password.value.length;

    const conditionOne = ID1 != 0 && ID2 != 0 && ID3 != 0;
    const conditionTwo = ID1 >= 5 && ID3 >= 5;

    conditionOne && conditionTwo
      ? (button.disabled = false)
      : (button.disabled = true);
  };

  form.addEventListener("change", checkParams);

  const usernameFieldHandler = function (e) {
    let value = e.target.value;
    e.target.value = value.replace("!", "");
  };

  username.addEventListener("input", usernameFieldHandler);

  const elementEvent = (n) => {
    const icon = n.querySelector(".form-field__icon");
    const input = n.querySelector(".form-field__input");

    const toggleIcons = (event) => {
      event.target.value !== "" && event.target.value.length >= 5
        ? icon.classList.add(iconIconActive)
        : icon.classList.remove(iconIconActive);
    };

    input.addEventListener("input", toggleIcons);
  };

  formField.forEach((n) => elementEvent(n));
};

document.addEventListener("DOMContentLoaded", mainFunction);
View Compiled

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.