Блог

Главная - Вопросы по программированию - Проверка формы javascript добавление класса ошибок css не работает

Проверка формы javascript добавление класса ошибок css не работает

#javascript #html #css #forms #validation

Вопрос:

Я создал контактную форму с JavaScript проверкой, но функция проверки не работает. Хотя он не показывает никаких ошибок в консоли. Функция отправки сама по себе работает и показывает окно предупреждения при отправке формы.

Функция проверки добавляет CSS класс ошибок, а затем должна отображать сообщение об ошибке, границу ошибки и символ erros. Когда я добавляю класс ошибок вручную в HTML-файл, появляются знаки erros. Но с функцией это не так.

Я думаю, может быть, это как-то связано с тем, как я добавляю функцию в форму. Но я все проверил, и, похоже, все выглядит нормально. Кто знает, что происходит не так? Некоторая помощь была бы очень признательна! Заранее спасибо!

 var firebaseConfig = {
  apiKey: " /* anominzed by editor */ ",
  authDomain: " /* anominzed by editor */ ",
  databaseURL: " /* anominzed by editor */ ",
  projectId: " /* anominzed by editor */ ",
  storageBucket: " /* anominzed by editor */ ",
  messagingSenderId: " /* anominzed by editor */ ",
  appId: " /* anominzed by editor */ ",
  measurementId: " /* anominzed by editor */ "
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

//Reference contactInfo collections
let contactInfo = firebase.database().ref("infos");

// Listen for a submit
document.querySelector(".contactForm").addEventListener("submit",
  submitForm);

function submitForm(e) {
  e.preventDefault();

  checkInputs(); //val

  //Get input values
  let name = document.querySelector(".name").value;
  let email = document.querySelector(".email").value;
  let message = document.querySelector(".message").value;
  console.log(name, email, message);

  saveContactInfo(name, email, message);

  //Refresh after submit
  document.querySelector(".contactForm").reset();

  //Call send email function
  sendEmail(name, email, message);
}


const form = document.getElementById('form'); //Val
const namecontact = document.getElementById('namecontact'); //Val
const email = document.getElementById('email'); //Val
const message = document.getElementById('message'); //Val

//form validaton
function checkInputs() {
  //Get the values from the inputs
  const nameValue = namecontact.value.trim();
  const emailValue = email.value.trim();
  const messageValue = message.value.trim();

  if (nameValue === '') {
    setErrorFor(namecontact, "Name cannot be blank");
  }
  if (emailValue === '') {
    setErrorFor(email, "Email cannot be blank");
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Email is not valid')
  }

  if (messageValue === '') {
    setErrorFor(message, "Message cannot be blank");
  }
}

function setErrorFor(input, errorMessage) {
  const formControl = input.parentElement; //.form-control
  const small = formControl.getElementsByClassName('small');

  small.forEach(element => {
    small.innerText = errorMessage;
  })

  //add error message inside small


  // add error class
  formControl.className = 'form-control error';
}

function isEmail(email) {
  return /^(([^<>()[]\.,;:s@"] (.[^<>()[]\.,;:s@"] )*)|(". "))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9] .) [a-zA-Z]{2,}))$/.test(email);
}


//Save infos to Firebase
function saveContactInfo(name, email, message) {
  let newContactInfo = contactInfo.push();

  newContactInfo.set({
    contactname: name,
    email: email,
    message: message,
  });
}

function showSucces() {
  alert("succesfully sent")
}

//Send Email function
function sendEmail(name, email, message) {
  Email.send({
    Host: "smtp.gmail.com",
    Username: "liaraskara@gmail.com",
    To: "liaraskara@gmail.com",
    From: "liaraskara@gmail.com",
    Subject: `${name} sent you a message`,
    Body: `Name: ${name} <br/> Email: ${email} <br/> Message: ${message}`,
  }).then((message) => showSucces());
} 
 /* master styles */

html {
  height: 100%;
}

.contactForm {
  flex: 0%;
  margin: 0px 0px;
  width: 21%;
  position: absolute;
  margin: 90px 0px 0px 10.5px;
  left: 0px;
  /* max-width: 100%; */
  /* opacity: 0.39; */
}

.name,
.email,
.subject {
  position: relative;
  width: 279px;
  height: 45px;
  padding: 9px 15px 15px 15px;
  margin-left: 39.9px;
  font-size: 12px;
}

.message {
  position: relative;
  width: 279px;
  height: 141px;
  padding: 9px 15px 15px 15px;
  margin-left: 39.9px;
  font-size: 12px;
}

 ::placeholder {
  margin-top: 0px;
  font-size: 12px;
}

.fas.fa-exclamation-circle {
  color: red;
  width: 15px;
  height: 15px;
  position: absolute;
  visibility: hidden;
  top: 15px;
  right: 60px;
}

.form-control {
  position: relative;
}

.form-control.error input {
  border-color: red;
}

.form-control.error i.fas.fas.fa-exclamation-circle {
  visibility: visible;
  color: red;
}

.form-control.error small {
  color: red;
  visibility: visible;
}

small {
  position: absolute;
  left: 66px;
  visibility: hidden;
  top: 27px;
}

#submitButton {
  margin: 9px 0px 0px 42px;
  width: 277.2px;
  height: 63px;
} 
 <html lang="en" id="html">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liara Skara</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="stylesheet" href="styles.css">
  <!-- <script src='https://kit.fontawesome.com/a076d05399.js'></script> -->
</head>

<body id="bodyContactpage">
  <form method="POST" class="contactForm" id="form">

    <!-- <div class="backgroundImg" style="background-image: url('Images/LiaraEyesOpen.png');"> -->
    <div class="form-control">
      <input class="name" id="namecontact" type="text" placeholder="Name" required/><br>
      <i class="fas fa-exclamation-circle" id="exclamation1"></i>
      <small class="small" id="small1">Error mesagge</small>
    </div>
    <div class="form-control">
      <input class="email" id="email" type="email" placeholder="E-mail" required/><br>
      <i class="fas fa-exclamation-circle" id="exclamation2"></i>
      <small class="small" id="small2">Error mesagge</small>
    </div>
    <div class="form-control">
      <input class="subject" type="text" placeholder="Subject" /><br>
      <i class="fas fa-exclamation-circle" id="exclamation3"></i>
      <small class="small" id="small3">Error mesagge</small>
    </div>
    <div class="form-control">
      <textarea class="message" id="message" name="" id="" cols="30" rows="10" placeholder="Message" required></textarea><br>
      <i class="fas fa-exclamation-circle" id="exclamation4"></i>
      <small class="small" id="small4">Error mesagge</small>
    </div>
    <button id="submitButton" type="submit">
      <span>Launch</span>
      <svg class="checkmark" viewBox="0 0 52 52">
        <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
      </svg>
    </button>   
</form>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase.js"></script>
<script src="myscript.js">
</script>
</body>

</html>

Комментарии:

1. Обратите внимание, что у вас неверная HTML-разметка. У вас больше закрывающих тегов, чем открывающих.

2. Спасибо @tacoshy, я изменил его.

Ответ №1:

Мне пришлось прокомментировать все материалы firebase, чтобы запустить ваш код: он не смог инициализироваться без полной конфигурации и выдал ошибку, которая не позволила запустить весь остальной код.

Как только я это сделал, я обнаружил ошибку в вашей setErrorFor функции:

 small.forEach is not a function

Это связано с тем, что getElementsByClassName (а также querySelectorAll ) возвращает не массив, а a HTMLCollection . У этого нет ни map методов, ни forEach методов.

Вместо этого вы можете использовать:

 for (const el of small) {
    el.innerText = errorMessage
}

В целом, однако, мой совет состоял бы в том, чтобы добавить описательное ведение журнала в ваш код, чтобы вы могли точно следить за тем, что происходит. Вы также можете включить опцию «Сохранять/сохранять журналы» в настройках браузера на случай, если журналы будут очищены неожиданной перезагрузкой страницы.

Ответ №2:

В работе есть несколько ошибок setErrorFor .

  1. Функция JavaScript getElementsByClassName возвращает коллекцию HTMLCollection.

    Попробуйте преобразовать его в массив , используя Array.from(HTMLCollection) , например, Array.from(formControl) в вашем случае.

  2. При циклическом прохождении через массив(FormControl) с помощью forEach функции ниже:

    small.forEach(element => { small.innerText = errorMessage; })

    вы должны ссылаться element и не small ссылаться . Так и должно быть element.innerText . Вам также необходимо установить свойство видимости для элемента с классом = «маленький» от hidden до visible .

Ответ №3:

Спасибо за вашу помощь! Я решил эту проблему, и теперь она работает, удалив функцию из другой функции отправки. И я изменил функцию setErrorFor на эту;

 function setErrorFor(input, errorMessage) {
  const formControl = input.parentElement; //.form-control
  const small = formControl.querySelector('small');

  //add error message inside small
  small.innerText = errorMessage;

// add error class
formControl.className = 'form-control error';
}
Метки: