Форма регистрации. Не получается сверить данные с данными из localStorage

Question

Пытаюсь сделать форму входа и регистрации. При успешной регистрации данные почты и пароля записываются в localStorage, а затем в форме "Вход" вводимые пользователем данные почты и пароля должны сравниваться с данными из localStorage. И при совпадении выводиться в консоль. Но что-то где-то идет не так. Помогите пожалуйста найти ошибку!

буду благодарна любому совету, который подскажет почему стили на чекбоксе не работают!

JS:

'use strict'

//скрипт для формы регистрации 
const preheader = document.querySelector('#preheader');

const emailChecker = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
const emailField = document.querySelector('#e-mail');

const password = document.querySelector('#password');
const preheaderpass = document.querySelector('#preheaderpass');

const star = document.querySelector('#star');

const errorIsOn = document.querySelector('#error');
const errorpass = document.querySelector('#errorpass');
const errorpass2 = document.querySelector('#errorpass2');
const errorpass3 = document.querySelector('#errorpass3');

const checkbox = document.querySelector('#box');

const btn = document.querySelector('#btn');

let a = false;
let b = false;
let c = false;

//проверка е-mail на валидность
function isEmailValid(value) {
  return emailChecker.test(value);
}

function onInput() {
  if (isEmailValid(emailField.value)) {
    emailField.style.borderColor = 'green';
    errorIsOn.style.display = 'none';
    preheader.style.color = 'black';
    a = true;
  } else {
    
    emailField.style.borderColor = 'red';
    preheader.style.color = 'red';
    errorIsOn.style.display = 'initial';
    star.style.color = 'red';
    emailField.style.marginLeft = '0px'; 
    a = false;
  }
}

emailField.addEventListener('keyup', onInput);

//проверка пароля на валидность
function passValidation() {
  if (password.value.length === 0) {
    password.style.borderColor = 'red';
    errorpass.style.display = 'initial';
    preheaderpass.style.color = 'red';
    errorpass2.style.display = 'none';
    b = false;
  } else if (password.value.length > 0 && password.value.length <= 8) {
    password.style.borderColor = 'red';
    errorpass2.style.display = 'initial';
    preheaderpass.style.color = 'red';
    star.style.color = 'red';
    b = false;
  } else {
    password.style.borderColor = 'green';
    errorpass.style.display = 'none';
    errorpass2.style.display = 'none';
    preheaderpass.style.color = 'black';
    star.style.color = 'red';
    b = true; 
  }
}

password.addEventListener('keyup', passValidation);

//проверка чекбокса
function checkboxValid() {
  if (!checkbox.checked === false) {
    checkbox.style.borderColor = 'black';
    errorpass3.style.display = 'none';
    c = true;
  } else {
    checkbox.style.borderColor = 'red';
    errorpass3.style.display = 'initial';
    star.style.display = 'initial';
    checkbox.style.marginLeft = '0px';
    star.style.color = 'red';
    c = false;
  }
}

checkbox.addEventListener('click', checkboxValid);

//проверка на соответствие всем 3-м условиям регистрации
function formValidation(evt) {

  if (a === true && b === true && c === true) {
    evt.preventDefault();
    console.log(emailField.value);
    console.log(password.value);

    //запись данных в localStorage

    //запись e-mail
    let emailLS = {email: emailField.value};
    let serialEmailLS = JSON.stringify(emailLS);
    localStorage.setItem("KeyEmail", serialEmailLS);

    //запись пароля
    let passwordLS = {password: password.value};
    let serialPasswordLS = JSON.stringify(passwordLS);
    localStorage.setItem("KeyPass", serialPasswordLS);
  } 

  let returnEMailLS = JSON.parse(localStorage.getItem("KeyEmail"));
  console.log(returnEMailLS);

  let returnPasswordLS = JSON.parse(localStorage.getItem("KeyPass"));
  console.log(returnPasswordLS);
}
    
btn.addEventListener('click', formValidation)

//скрипт для формы Вход
const preheader_entr = document.querySelector('#preheader_entr');
const email_entr = document.querySelector('#e-mail_entr');

const password_entr = document.querySelector('#password-entr');
const preheaderpass_entr = document.querySelector('#preheaderpass_entr');

const error_entr = document.querySelector('#error-entr');
const errorpass_entr = document.querySelector('#errorpass-entr');
const errorEntr_entr = document.querySelector('#errorEntr-entr');

const btn_entr = document.querySelector('#btn_entr');

let emailCh = returnEMailLS;

let d = false;
let e = false;


function emailValidation(value) {
  return emailCh.test(value);
}

//проверка e-mail
function emailEnterValidation(){
  if (emailValidation(email_entr.value)){
  email_entr.style.borderColor = 'green';
  error_entr.style.display = 'none';
  preheader_entr.style.color = 'black';
    d = true;
} else {
  error_entr.style.display = 'initial';
  email_entr.style.borderColor = 'red';
  preheader_entr.style.color = 'red';
  star.style.color = 'red';
  d = false;
}
}

email_entr.addEventListener('keyup',emailEnterValidation);

//проверка пароля

let passCh = returnPasswordLS;

function passValidation(value) {
  return passCh.test(value);
}

function passwordEnterValidation(){
  if (passValidation(password_entr.value)){
  password_entr.style.borderColor = 'green';
  errorpass.style.display = 'none';
  errorEntr_entr.style.display = 'none';
  preheaderpass_entr.style.color = 'black';
    e = true;
} else {
  errorpass_entr.style.display = 'initial';
  preheader_entr.style.color = 'red';
  password_entr.style.borderColor = 'red';
  star.style.color = 'red';
  e = false;
}
}

password_entr.addEventListener('keyup', passwordEnterValidation);

//проверка  на соответствие условиям входа
function validEnter(evt){
  if (d === true && e === true && c === true){
    evt.preventDefault();
    console.log("Логин:", email_entr.value);
    console.log("Пароль:", password_entr.value);
  }
}

btn_entr.addEventListener('click', validEnter);

HTML Entrance:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../module_two_javascript/normalize.css">
    <link rel="stylesheet" href="../module_two_javascript/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <title>Form</title>
</head>
<body>

  <form class = "form" id = "form-entr">
  
    <a class = "form__registration" href = "../module_two_javascript/reg_index.html">Зарегистрироваться</a>
    <h1 class = "form__header-entr">Вход</h1>

    <p class = "form__preheader-entr" id = "preheader-entr">E-mail</p>

    <div class = "form__container">
      <span class = "form__star" id = "star">*</span>
      <input class = "form__field-entr" type = "text" id = "e-mail_entr" placeholder = "Введите e-mail">
    </div>
   
    <p class = "form__error-entr" id = "error-entr">Поле обязательно для заполнения</p>

    <p class = "form__preheader-entr" id = "preheaderpass_entr">Пароль</p>

    <div class = "form__container">
      <span class = "form__star" id = "star">*</span>
    <input class = "form__field-entr" type = "password" id = "password-entr" placeholder = "Введите пароль">
    </div>
    
    <p class = "form__error-entr" id = "errorpass-entr">Поле обязательно для заполнения</p>
    <p class = "form__error-entr" id = "errorEntr-entr">Пароль или логин неверный</p>

    <div class = "form__pc">
      <div class = "form__checkbox">

        <div class = "form__container">
          <span class = "form__star" id = "star">*</span>
        <input class = "form__box" type = "checkbox" id = "box" value = "check">
        </div>
        
        <label for = "box" class = "form__text">Я согласен получать обновления на почту</label>
      </div>
      <p class = "form__error" id = "errorpass3">Поле обязательно для заполнения</p>
    </div>

    <button class = "form__send-entr" id = "btn_entr" type = "submit">
            Войти
    </button>
    <script src = "../module_two_javascript/script_exam.js"></script>
</body>
</html>

HTML Registration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../module_two_javascript/normalize.css">
    <link rel="stylesheet" href="../module_two_javascript/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <title>Form</title>
</head>
<body>

  <form class = "form" id = "form">

    <a class = "form__registration" href = '../module_two_javascript/index.html'>Авторизоваться</a>
    <h1 class = "form__header">Регистрация</h1>

    <p class = "form__preheader" id = "preheader">E-mail</p>

  <div class = "form__container">
    <span class = "form__star" id = "star">*</span>
    <input class = "form__field" type="text" id = "e-mail" placeholder = "Введите e-mail">
  </div>

    <p class = "form__error" id = "error">Поле обязательно для заполнения</p>
    <p class = "form__preheader" id = "preheaderpass">Пароль</p>

  <div class = "form__container">
    <span class = "form__star" id = "star">*</span>
    <input class = "form__field" type = "password" id = "password" placeholder="Введите пароль">
  </div> 
    
    <p class = "form__error" id = "errorpass">Поле обязательно для заполнения</p>
    <p class = "form__error" id = "errorpass2">Пароль должен содержать как минимум 8 символов</p>

    <div class = "form__pc">
      <div class = "form__checkbox">

      <div class = "form__container"> 
        <span class = "form__star" id = "star">*</span>
        <input class = "form__box" type="checkbox" id = "box" value = "check">
       </div> 

        <label for = "box" class = "form__text">Я согласен получать обновления на почту
        </label>
      </div>
      <p class = "form__error" id = "errorpass3">Поле обязательно для заполнения</p>
    </div>

    <button class = "form__send" id = "btn" type = "submit">
            Регистрация
    </button>
    <script src = "../module_two_javascript/script_exam.js"></script>
</body>
</html>

CSS:

body {
    max-width: 1440px;
    max-height: 769px;
    background-color: #1B2473;
    display:flex;
    flex-direction:column;
    font-family: 'Roboto', sans-serif;
  }

  @media screen and (max-width:768px) {
      .body{
        max-width: 768px;
      }
    
  }
  
.form, .form-entr{
    width: 600px;
    height: fit-content;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top:82px;
    display:flex;
    flex-direction:column;
}

@media screen and (max-width: 768px){
    .form, .form-entr{
    width: 728px;
    height: fit-content;
    }
}

.form__preheader, .form__preheader-entr{
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    
    color: #787878;
    margin-left:45px;
    margin-bottom:7px;
}

@media screen and (max-width:768px){
    .form__preheader, .form__preheader-entr{
    font-size: 24px;
    } 
}

.form__header{
    width: 115px;
    height: 50px;
    
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    
    color: #787878;

    margin-left:25%;
    margin-right:auto;
    margin-bottom:0px;
    margin-top:15px;
}

.form__header-entr{
    width: 115px;
    height: 50px;
    
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    
    color: #787878;

    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
    margin-top:20px;
}


@media screen and (max-width:768px){
    .form__header, .form__header-entr{
    width: 138px;
    font-size: 60px;
    }
}

.form__field, .form__field-entr{
    width: 509px;
    height: 49px;
    
    background: #FFFFFF;
    border: 2px solid #787878;
    border-radius: 10px;

    margin-left:0px;
    margin-right:auto;
    margin-bottom:0px;

    font-weight: 700;
    font-size: 28px;
    line-height: 36px;

    color: #CCCCCC;
}

@media screen and (max-width:768px){
    .form__field, .form__field-entr{
    width: 638px;
    height: 49px;
    } 
}

.form__error, .form__error-entr{
  display:none;
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  color: #CB2424;  
  margin-left:45px;
  margin-right:auto;
  margin-bottom:12px;
}

.form__star{
    width: 7px;
    height: 12px;
    color: #787878;
}

.form__pc{
  width: 638px;
  height:fir-content;
    display: flex;
    flex-direction:column;
    justify-content:flex-start;
}

.form__box{
    width: 24px;
    height: 24px;

    border: 2px solid #787878;
    border-radius: 7px;
    margin-left:0px;
    margin-right:10px;
}

@media screen and (max-width:768px){
    .form__box{
        width: 32px;
        height: 32px;
    }  
}

.form__checkbox{
  width:100%;
  display:flex;
  flex-direction:row;
}

.form__text{
    width: 278px;
    height: 16px;

    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    color: #787878;
    margin-top:3px;
}

@media screen and (max-width:768px){
    .form__text{
        width: 358px;
        font-size: 18px;
    }  
}

.form__send, .form__send-entr{
    width: 180px;
    height: 52px;

    background-color: #1A226B;
    border-radius: 10px;

    font-weight: 700;
    font-size: 24px;
    line-height: 16px;

    color: #FFFFFF;

    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    margin-bottom:26px;
}

@media screen and (max-width:768px){
    .form__send, .form__send-entr{
    width: 220px;
    height: 80px;
    font-size: 32px;
    }  
}

.form__container{
    display:flex;
    flex-direction:row;
}

.form__star{
    margin-left:34px;
    margin-right:4px;
}

.form__registration{
width: 137px;
height: 16px;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #1A226B;
margin-left:70%;
margin-top:10px;
}

БЛОГ НА HUSL

Форма регистрации. Не получается сверить данные с данными из localStorage

Ответы (0 шт):