Thiết kế website giá rẻ

Question

I am completing the validation of a form in HTML, CSS and JS(Ts) and even though the form has the correct information, it does not submit and always falls into the “else” of the if that I created to return to the user that there are invalid fields, such as no I know what’s going on, I put “unknown error” lol:

import { isStrongPassword } from "validator"
import isEmail from "validator/lib/isEmail"
isStrongPassword
class validateForm{
  constructor(){
    username: HTMLInputElement
    email: HTMLInputElement
    password: HTMLInputElement
    confirmPassword: HTMLInputElement
    form: HTMLInputElement
    usernameErrors: HTMLCollection
    errors: HTMLSpanElement
  }

  username = document.querySelector(".username")
  email = document.querySelector(".email")
  password = document.querySelector(".password")
  confirmPassword = document.querySelector(".password2")
  form = document.querySelector<HTMLFormElement>(".form")
  usernameErrors = document.querySelector<HTMLElement>(".username-error-message")
  emailErrors = document.querySelector<HTMLElement>(".email-error-message")
  passwordErrors = document.querySelector<HTMLElement>(".password-error-message")
  confirmErrors = document.querySelector<HTMLElement>(".confirm-error-message")
  errors = document.querySelector<HTMLElement>("span[name='errors']")

  throwErrors = (field:any, errMsg: any) => {
    field!.innerHTML = ""
    field!.style.display = "inline"
    field!.innerHTML = errMsg
  }

  removeError = (field: any) => {
    field!.innerHTML = ""
    field!.style.display = "inline"
  }


  events = () => {
    this.form!.addEventListener('submit', (e: any) => {
      this.handleSubmit(e);
    });
  }

  handleSubmit = (e: any) => {
    e.preventDefault();
    this.validaCampos(
      this.username,
      this.email,
      this.password,
      this.confirmPassword);
  }

  validaCampos = (username: any,
    email: any,
    password: any,
    confirmPassword: any) => {
    if (username.value){
      this.removeError(this.usernameErrors)
      this.validaUsername(username.value)
      username = true
    } else {
      this.throwErrors(this.usernameErrors, "O campo não pode estar vazio")
      username = false
    }

    if (email.value){
      this.removeError(this.emailErrors)
      this.validaEmail(email.value)
      email = true
    } else {
      this.throwErrors(this.emailErrors, "O campo não pode estar vazio")
      email = false
    }

    if (password.value){
      this.removeError(this.passwordErrors)
      this.validaPassword(password.value)
      password = true
    } else {
      this.throwErrors(this.passwordErrors, "O campo não pode estar vazio")
      password = false
    }

    if (confirmPassword.value){
      password = this.password
      this.removeError(this.confirmErrors)
      this.validaConfirm(password.value, confirmPassword.value)
      confirmPassword = true
    } else {
      this.throwErrors(this.confirmErrors, "O campo não pode estar vazio")
      confirmPassword = false
    }

    if(username && email && password.value === confirmPassword) {
      alert("form sent successfully")
      this.form!.submit()
    } else {
      console.log("unknown error");
    }
}


  validaUsername = (username: any) => {
    username.length > 20 ? this.throwErrors(this.usernameErrors,
    "o usuário deve ter no máximo 20 caracteres")
    : this.removeError(this.usernameErrors)
  }

  validaEmail = (email: any) => {
    isEmail(email) ? this.removeError(this.emailErrors)
    : this.throwErrors(this.emailErrors, "email inválido")
  }

  validaPassword = (password: any) => {
    isStrongPassword(password) ? this.removeError(this.passwordErrors)
    : this.throwErrors(this.passwordErrors,
    'a senha deve conter 8 caracteres <br> maiúsculas e minúsculas <br> e caracteres especiais ("!,.@#$")')
  }

  validaConfirm = (password: string, confirmPassword: string) => {
    password === confirmPassword ? this.removeError(this.confirmErrors)
    :this.throwErrors(this.confirmErrors, "as senhas não conferem")
  }

}

(new validateForm().events() as any)

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Faça seu registro</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <div class="container">
    <form action="" id="form" class="form">
      <h2>Faça seu cadastro</h2>
      <div class="form-fields">
        <label for="username">Seu usuário</label>
        <input type="text" name="username" class="username" id="username" placeholder="Seu usuário">
        <span class="username-error-message" name="errors"></span>
      </div>
      <div class="form-fields">
        <label for="email">Seu e-mail</label>
        <input type="email" name="email" class="email" id="email" placeholder="Seu e-mail">
        <span class="email-error-message" name="errors"></span>
      </div>
      <div class="form-fields">
        <label for="username">Sua senha</label>
        <input type="password" name="password" class="password" id="password" placeholder="Sua senha">
        <span class="password-error-message" name="errors"></span>
      </div>
      <div class="form-fields">
        <label for="username">Repetir senha</label>
        <input type="password" name="password2" class="password2" id="password2" placeholder="Repetir senha">
        <span class="confirm-error-message" name="errors"></span>
      </div>
      <div class="form-fields">
        <button type="submit">Enviar</button>
      </div>
    </form>
  </div>

  <script src="assets/js/bundle.js"></script>
</body>

</html>

:root {
  --dark-color: #111;
  --light-color: #f3f3f3;
  --medium-color: #bbb;
  --border-color: #ddd;
  --main-color: #0074D9;
  --error-color: #FF4136;
  --border-radius: 4px;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

body {
  background-color: var(--dark-color);
  font-family: sans-serif;
  color: var(--dark-color);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px auto;
}

.form {
  padding: 20px;
  background: #fff;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  margin: auto 20px;
}

.form h2 {
  padding: 10px 0 30px;
  text-align: center;
}

.form .form-fields {
  margin: 0 0 20px;
}

.form label {
  display: block;
  font-size: 10pt;
  color: #999;
}

::placeholder {
  color: #ddd;
  font-size: 10pt;
}

.form input[type] {
  width: 100%;
  border: 1px solid var(--border-color);
  font-size: 18px;
  padding: 5px 10px;
  border-radius: var(--border-radius);
  transition: border 300ms ease-in-out;
}

.form input[type]:focus {
  border-color: var(--medium-color);
}

.form button {
  border: none;
  background: var(--main-color);
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 700;
  color: var(--light-color);
  border-radius: var(--border-radius);
  transition: filter 300ms ease-in-out;
}

.form button:hover {
  filter: brightness(80%);
}

.form .error-message {
  font-size: 9pt;
  padding: 5px 0;
  color: var(--error-color);
  font-style: italic;
  display: none;
}

.form .show-error-message .error-message {
  display: block;
}

.form .show-error-message input[type] {
  border-color: var(--error-color);
}

.username-error-message{
  font-size: 9pt;
  padding: 5px 0;
  color: var(--error-color);
  font-style: italic;
  display: none;
}

.email-error-message{
  font-size: 9pt;
  padding: 5px 0;
  color: var(--error-color);
  font-style: italic;
  display: none;
}

.password-error-message {
  font-size: 9pt;
  padding: 5px 0;
  color: var(--error-color);
  font-style: italic;
  display: none;
}

.confirm-error-message {
  font-size: 9pt;
  padding: 5px 0;
  color: var(--error-color);
  font-style: italic;
  display: none;
}

I tried to do the validation in the form of a function but the result is the same

Thiết kế website giá rẻ

Danh mục

form does not validate correctly