Форма авторизации и регистрации

Совмещенная форма авторизации и регистрации в одном интерфейсе. Переключение сделано посредством табов с анимацией на CSS.
Само переключение табов сделан на JS, также в скрипте добавлена проверка валидации для форм.

HTML

<!-- 
Project: Validation form;
author: Peresunko Serhii;
ver: 1.0;
Tech: HMTL5,CSS3(SCSS), Pure jаvascript, font-awesome.css, animete.css;
-->

<div class="wrapper">
  <div class="enter animated fadeInDown">
  <a href="#">Enter</a>    
  </div>
  <div class="container_form">
    <ul class="info">
      <li class="active_link"><a href="#">Log In</a></li>
      <li><a href="#">Sign Up</a></li>
      <div class="close"><a href="#"><i class="fa fa-close"></i></a></div>
    </ul>
    <form action="" id="myForm">
      <div class="inputBox">
        <input type="text" class="username" placeholder="Username">
      </div>
      <div class="inputBox passBox">
        <input type="password" class="password" placeholder="Password (A-Z,a-z,0-9)">
      </div>
      <div class="inputBox emailBox">
        <input type="email" class="email"  placeholder="E-mail (@)">
      </div>
      <div class="inputBox">
        <input type="submit" value="Enter" class="sendBut">
      </div>
    </form>
  </div>
</div>

CSS

Дополнительные библиотеки:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" type="text/css">

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
html, body {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto Condensed', sans-serif;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 50%), url("https://images.pexels.com/photos/889084/pexels-photo-889084.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat center center;
  background-size: auto;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 575px;
  height: 425px;
  border-radius: 3px;
  background: linear-gradient(45deg, rgba(69, 104, 220, 0.6) 0%, rgba(176, 106, 179, 0.9) 100%), url("https://images.pexels.com/photos/889084/pexels-photo-889084.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat center center;
  background-size: cover;
  overflow: hidden;
  -webkit-box-shadow: 0px 53px 37px -39px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 53px 37px -39px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 53px 37px -39px rgba(0, 0, 0, 0.7);
}
.wrapper .enter {
  position: absolute;
  left: 43%;
  transition: left .3s;
}
.wrapper .enter a {
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 10px;
  transition: letter-spacing .3s;
}
.wrapper .enter:hover {
  left: 44.9%;
  transition: left .3s;
}
.wrapper .enter:hover a:hover {
  letter-spacing: 4px;
  transition: letter-spacing .3s;
}
.wrapper .active_enter {
  color: #ffffff;
  background: #ffffff;
  height: 4px;
  left: 0 !important;
  overflow: hidden;
  letter-spacing: 10px;
  transition: left .3s, height .3s ,letter-spacing .3s, background .3s;
}
.wrapper .active_enter a {
  color: #ffffff;
  letter-spacing: 4px;
  transition: color .3s, letter-spacing .3s;
}
.wrapper .container_form {
  position: absolute;
  right: 0;
  background: #ffffff;
  background-size: auto;
  padding: 25px 0 25px 0;
  width: 0px;
  height: 425px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  transition: width .3s, padding .3s;
}
.wrapper .container_form .close {
  position: relative;
  left: 95px;
}
.wrapper .container_form .close a {
  color: #292929;
}
.wrapper .container_form .info {
  display: flex;
  padding: 0;
  list-style-type: none;
}
.wrapper .container_form .info li {
  color: #252525;
  font-size: 18px;
  margin-right: 15px;
  padding-bottom: 10px;
  transition: border-bottom .1s;
  border-bottom: 0 solid #4568dc;
}
.wrapper .container_form .info li a {
  color: #252525;
  text-decoration: none;
  transition: color .3s;
}
.wrapper .container_form .info li a:hover {
  color: #252525;
  transition: color .3s;
}
.wrapper .container_form .info li:hover {
  padding-bottom: 10px;
  border-bottom: 4px solid #4568dc;
  transition: border-bottom .1s;
}
.wrapper .container_form .info li:hover a {
  color: #4568dc;
}
.wrapper .container_form .info .active_link {
  padding-bottom: 10px;
  border-bottom: 4px solid #b06ab3;
}
.wrapper .container_form .info .active_link a {
  color: #b06ab3;
}
.wrapper .container_form #myForm .inputBox {
  position: relative;
  margin: 20px 0 20px 0;
  display: flex;
  border: 1px solid #f1f1f1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.wrapper .container_form #myForm .inputBox input {
  color: #252525;
  padding: 7px 7px 7px 10px;
  width: 195px;
  font-size: 14px;
  border-radius: 2px;
  border: 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0);
}
.wrapper .container_form #myForm .inputBox input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: silver !important;
  font-size: 12px;
}
.wrapper .container_form #myForm .inputBox input::-moz-placeholder {
  /* Firefox 19+ */
  color: silver !important;
  font-size: 12px;
}
.wrapper .container_form #myForm .inputBox input:-ms-input-placeholder {
  /* IE 10+ */
  color: silver !important;
  font-size: 12px;
}
.wrapper .container_form #myForm .inputBox input:-moz-placeholder {
  /* Firefox 18- */
  color: silver !important;
  font-size: 12px;
}
.wrapper .container_form #myForm .inputBox input[type="submit"] {
  color: #ffffff;
  letter-spacing: 2px;
  padding-top: 8px;
  font-size: 12px !important;
  text-transform: uppercase;
}
.wrapper .container_form #myForm .inputBox .sendBut {
  height: 30px !important;
  background: linear-gradient(15deg, #4568dc, #b06ab3);
  width: 255px;
  transition: background .3s;
}
.wrapper .container_form #myForm .inputBox .sendBut:hover {
  background: linear-gradient(115deg, #4568dc, #b06ab3);
  transition: background .3s;
}
.wrapper .container_form #myForm .inputBox i {
  position: relative;
  width: 30px;
  top: 7px;
  left: 16px;
}
.wrapper .container_form #myForm .inputBox i.fa-check {
  color: #4568dc;
}
.wrapper .container_form #myForm .inputBox i.fa-exclamation {
  color: #b06ab3;
  left: 20px;
}
.wrapper .container_form #myForm .passBox {
  margin: 0 !important;
}
.wrapper .container_form #myForm .emailBox {
  height: 0;
  margin: 0;
  border: 0px solid #f1f1f1;
  transition: height .3s, border .3s, margin .3s;
}
.wrapper .container_form #myForm .active_emailBox {
  height: 30px;
  border: 1px solid #f1f1f1;
  margin: 20px 0 20px 0;
  transition: height .3s, margin .3s;
}
.wrapper .active_container {
  width: 50%;
  padding: 25px;
  transition: width .3s, padding .3s;
}

JS

class EnterPage {
  constructor(name){
    this.name = name;
  }
  openForm(){
    var enterBut = document.querySelector('.enter');
    var closeBut = document.querySelector(".close");
    enterBut.addEventListener('click', function(e){
      e.preventDefault();
      var form = document.querySelector(".container_form");
      if(!(form.classList=="active_container")){
        form.classList.toggle("active_container");
        this.classList.toggle("active_enter");
      }
    });
    closeBut.addEventListener('click', function(e){
      e.preventDefault();
      var form = document.querySelector(".container_form");
      if(!(form.classList=="active_container")){
        form.classList.toggle("active_container");
        enterBut.classList.toggle("active_enter");
      }
    });
  }
  formValid(){
    //     errors message
    function _check(field) {
        var el = document.createElement("i");
        var fa = el.classList.add("fa");
        var icon = el.classList.add("fa-check");
        var animation = el.classList.add("animated");
        var anim_type = el.classList.add("fadeInDown");
        var parent = field.parentNode;
        if (!(parent.childNodes[3])){
          parent.appendChild(el);
        } else {
         parent.childNodes[3].remove();
          _check(field);
        }
     }
    function _error(field) {
        var el = document.createElement("i");
        var fa = el.classList.add("fa");
        var icon = el.classList.add("fa-exclamation");
        var animation = el.classList.add("animated");
        var anim_type = el.classList.add("fadeInUp");
        var parent = field.parentNode;
        if (!(parent.childNodes[3])){
          parent.appendChild(el);
        } else {
         parent.childNodes[3].remove();
         field.value="";
          _error(field);
        }
     }
    //     data validation  
    function _userValid(){
      var username = document.querySelector(".username");
      if (username.value.match(/[a-z]/i)){
        _check(username);
      }
      else {
        _error(username);
        return false;
      }
    }
    function _passValid(){
      var password = document.querySelector(".password");
      if (password.value.match(/[A-Z,a-z,0-9]/) && password.value.length > 8){
        _check(password);
      }
      else {
        _error(password);
        return false;
      }
    }
    function _emailValid(){
      var email = document.querySelector(".email");
      if (email.value.match(/[a-z]+@+[a-z]+.+[a-z]/i)){
        _check(email);
      }
      else {
        _error(email);
        return false;
      }
    }
    // registration
    function _registration(){
      var menu = document.querySelector(".info");
      var li = menu.querySelectorAll("li");
      for (var i = 0 ; i< li.length; i++){
        li[i].addEventListener("click", function(){
          var emailBox = document.querySelector(".emailBox");
            if(!(li[1].classList.contains("active_link"))){
              li[1].classList.add("active_link");
              emailBox.classList.add("active_emailBox");
              li[0].classList.remove("active_link");
            } else {
              li[1].classList.remove("active_link");
              emailBox.classList.remove("active_emailBox");
              li[0].classList.add("active_link");
            }
        })
      }
    }
    _registration();
    
    var sendBut = document.querySelector('.sendBut');
    sendBut.addEventListener("click", function(e){
      e.preventDefault();
      _userValid();
      _passValid();
      _emailValid();
      if(_userValid()!=false && _passValid()!=false && _emailValid()!=false){
        
      } else {
        console.log("Please fix you mistake");
      }
    });
  }
}


var enterPage = new EnterPage();
enterPage.openForm();
enterPage.formValid();