Блог

Главная - Вопросы по программированию - Базовая проверка формы с помощью DOM

Базовая проверка формы с помощью DOM

#javascript #html #css #forms #dom

#javascript #HTML #css — код #формы #dom

Вопрос:

Здесь новичок в JS. Я пытался самостоятельно изучить базовый интерфейс и попытался создать эту проверку формы, но мои сообщения об ошибках не работают должным образом. Если поле пустое, я хочу, чтобы каждое поле возвращало свое собственное сообщение об ошибке, но что-то перезаписывает другие.

Прилагаю коды и скриншот.

 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Validator</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      <div class="container">
        <form id="all-form" action="">
        <h3>Register with us</h3>
        <div class="form-control">
          <label for="Username">Username</label>
          <input id="user" type="username" placeholder="Enter Username" />
          <small>error message</small>
        </div>
        <div class="form-control">
          <label for="email">Email</label>
          <input id="mail" type="email" placeholder="Enter Email" />
          <small>error message</small>
        </div>
        <div class="form-control">
          <label for="password">Password</label>
          <input id="pass" type="password" placeholder="Enter Password" />
          <small>error message</small>
        </div>
        <div class="form-control">
          <label for="password">Confirm Password</label>
          <input id="pass-again" type="password" placeholder="Enter Password Again" />
          <small>error message</small>
        </div>
        <button type="submit" class="submit-btn">Submit</button>
      </div>
    </form>

    <script src="app.js"></script>
  </body>
</html>
 
 :root{
  --success-color:#2ecc71;
  --error-color:#e74c3c;
}

*{
  margin:0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.container{
  position: relative;
  top:10em;
  margin: auto;
  background-color: #fff;
  width: 400px;
  border-radius: 5px;
  box-shadow:0 2px 10px rgba(0,0,0, 0.3);
}

form{
  padding:20px 20px;
}

h3 {
  text-align: center;
}

label, input{
  display: block;
  margin:5px;
  width: 90%;
}

label{
  padding-top: 15px;
  padding-right: 15px;
  text-align: left;

  margin-bottom: 5px;
}

input{
  padding:3px;
  border-radius: 5%;
  font-size: 14px;
}

.submit-btn{
  display: block;
  padding:10px;
  background-color: royalblue;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  margin-top:20px;
  width: 100%;
}

input:focus{
  outline:0;
  border-color: #777;
}

.form-control.success input{
  border-color: var(--success-color);
}

.form-control.error input{
  border-color: var(--error-color);
}

.form-control small{
  color:var(--error-color);
  position: relative;
  bottom:1px;
  left:7px;
  visibility: hidden;
}

.form-control.error small{
  visibility: visible;
}
 
 // Selectors

const username = document.querySelector("#user");
const mail = document.querySelector("#mail");
const pass = document.querySelector("#pass");
const passAgain= document.querySelector("#pass-again");
const sbtBtn = document.querySelector(".submit-btn");
const form = document.querySelector("#all-form");



// Event Listeners


function showError(input,message){
  const formControl = input.parentElement;
  formControl.className = "form-control error";
  const small = document.querySelector("small");
  small.innerText = message;
}

function showSuccess(input){
  const formControl = input.parentElement;
  formControl.className = "form-control success";

}
form.addEventListener("submit",checkAll);

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

  if(username.value === ""){
    showError(username, "Username is required");
  } else {
    showSuccess(username);
  }
  if(mail.value === ""){
    showError(mail, "E-mail is required");
  } else {
    showSuccess(mail);
  }

  if(pass.value === ""){
    showError(pass, "Password is required");
  } else {
    showSuccess(pass);
  }
  if(passAgain.value === ""){
    showError(passAgain, "Enter password again please");
    } else {
    showSuccess(passAgain);
  }
}

введите описание изображения здесь

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

1. document.querySelector("small") выбирает первый small элемент внутри всего документа. Вам нужно ограничить этот выбор более разумной областью.

2. да, но это внутри функции showerror, поэтому я подумал, что она возьмет небольшой элемент из входных данных? как я должен это изменить?

3. Нет, вы неправильно подумали. // Вы уже переходите от входного элемента к его родительскому элементу — поэтому вызовите querySelector метод для этого родительского элемента вместо document .

4. спасибо, вы спасли мне жизнь 🙂

Метки: