Condicional não está sendo chamada

ElderFausto commented 1 year ago

Etapa da aula

07

Nome da aula

Correção dos exercícios da aula 02 da etapa 06 - Aula 01-01

Link da aula

https://app.nutror.com/v3/curso/a977a43d31cedcb6e7d064649ddd6c5436155aaf/curso-de-javascript-roger-melo/aula/943413

Descreva a dúvida

Eu gostaria de entender qual seria o meu erro, no 'form.addEventListener' após eu clicar em submit ele apenas executa a condição verdadeira e não consegue executar a false, essa foi minha primeira tentativa para fazer o exercicio da aula.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
  <link rel="stylesheet" href="./style.css">
  <title>Exercício 18</title>
</head>
<body>
  <div class="container">
    <h1>Exercício 18</h1>

    <form>
      <fieldset>
        <label for="username">Nome de usuário</label>
        <input
          type="text"
          placeholder="Cadastre seu nome de usuário"
          id="username"
          autofocus
        >

        <button class="button">Enviar</button>
      </fieldset>
    </form>
  </div>

  <script src="./app.js"></script>
</body>
</html>

const form = document.querySelector('form')
const fieldset = document.querySelector('fieldset')
const input = document.querySelector('#username')
const button = document.querySelector('.button')
const p = document.createElement('p')

input.addEventListener('keyup', event => {
  const regexUsername = /^[a-zA-Z]{6,}$/
  const username = event.target.value
  const valueUsername = regexUsername.test(username);

  if(valueUsername) {
    input.insertAdjacentElement("afterend", p)
    p.setAttribute('class', 'username-success-feedback')
    p.textContent = `Username válido =)`
    return
  } 
    input.insertAdjacentElement("afterend", p)
    p.setAttribute('class', 'username-help-feedback')
    p.textContent = "O valor deve conter no mínimo 6 caracteres, com apenas letras maiúsculas e/ou minúsculas" 
})

form.addEventListener('submit', event => {
  event.preventDefault()

  const regexUsername = /^[a-zA-Z]{6,}$/
  const username = event.target.value
  const valueUsername = regexUsername.test(username);

  if(valueUsername) {
    button.insertAdjacentElement("afterend", p)
    p.setAttribute('class', 'submit-success-feedback')
    p.textContent = "Dados enviados =)"
    return
  } 
    button.insertAdjacentElement("afterend", p)
    p.setAttribute('class', 'submit-help-feedback')
    p.textContent = "Por favor, insira um username válido"
})



<!-- Não apague daqui para baixo! -->
@Roger-Melo

Roger-Melo commented 1 year ago

Olá @ElderFausto.

Eu procurei pelo seu nome na lista de alunos mas não encontrei. Com qual email vc se cadastrou no CJRM? Se não quiser falar por aqui, pode mandar um email para oi@rogermelo.com.br

ElderFausto commented 1 year ago

ok

roger-melo-treinamentos / curso-de-js-roger-melo