Como construir e validar formulários bonitos com Vanilla HTML, CSS e JS

Como construir e validar formulários bonitos com Vanilla HTML, CSS e JS

16 de September, 2020 0 By António César de Andrade
Click to rate this post!
[Total: 0 Average: 0]


Os formulários são difíceis.

Saber como coletar e validar adequadamente os dados do usuário é uma das habilidades mais importantes que um desenvolvedor de front-end precisa ter. Mas é difícil porque casos extremos são abundantes.

Você deve considerar todas as maneiras pelas quais um usuário pode quebrar sua forma bonita e, ao mesmo tempo, fornecer uma excelente experiência de usuário.

A parte UX é importante porque os formulários são os guardiões das conversões de produtos e serviços. Se você, como desenvolvedor front-end, errar, pode haver consequências financeiras significativas.

É por isso que existem milhares (um pequeno exagero) de bibliotecas de formulários que implementam as melhores práticas do setor.

Não há nada de errado em usar essas bibliotecas. O problema surge quando os desenvolvedores os usam sem entender como os formulários realmente funcionam e por que certos padrões são considerados padrões.

Vou mostrar como construiria um formulário de inscrição do zero, usando apenas HTML, CSS e JavaScript.

Ok, sem mais delongas, vamos começar.

Área de Trabalho

Móvel

Quando você é apresentado a um design como este, sua primeira pergunta deve ser, quantos estados não são representado aqui?

Os exemplos acima representam um estado (quando um usuário visita a página de login, isso é o que ele verá no desktop e no celular).

Outros estados incluiriam:

  • Estado de Erro
    • O que acontece se eu inserir um e-mail que já existe?
  • Carregando estado
    • O que acontece quando eu envio o formulário?

Ao planejar seu trabalho, certifique-se de considerar o que não está no design que deve ser considerado. Você precisa revisar cuidadosamente os requisitos do recurso e fazer perguntas se achar que algo está faltando.

Falando em requisitos …

Como desenvolvedor, você frequentemente verá um PRD (Documento de Requisitos do Produto) de um gerente de produto, designer ou gerente de projeto.

Esses documentos são geralmente divididos em histórias de usuário individuais que você executará durante uma sprint.

Colocando meu chapéu de gerente de produto, aqui estão os requisitos de recursos para nosso formulário:

  • O usuário deve fornecer um endereço de e-mail
  • A senha deve ter pelo menos 10 caracteres e conter pelo menos uma letra maiúscula, número e caractere especial.
  • Devemos mostrar mensagens de erro ao usuário quando ele não atender aos requisitos

Markup

O primeiro código que escreveremos será HTML com apenas um traço de CSS.

Ainda não parece muito, mas há um bom trabalho aqui. Vamos mergulhar um pouco.

  • Configuramos o lado e os elementos principais junto com nosso formulário
  • Estou usando o BEM como um guia para criar nomes de classes e elementos HTML semânticos para facilitar a leitura.
  • Nossa página de inscrição tem uma abordagem móvel primeiro, o que significa que escrevemos estilos móveis primeiro e adicionamos pontos de interrupção para estilos de desktop.
  • Estou aproveitando a grade CSS para o layout geral e o Flexbox para posicionar os elementos na seção principal.
  • Eu adicionei um ouvinte de envio de evento para o formulário junto com uma função de manipulador de eventos que simplesmente registra o objeto de evento por enquanto.

Validação

Vamos aproveitar alguma lógica de validação embutida escolhendo nossos tipos de entrada com sabedoria. Usaremos o seguinte:

  • Tipo de entrada de email
  • Tipo de entrada de senha

O tipo de entrada de email nos dá algumas validações legais gratuitamente.

  1. Ele verifica para ter certeza de que @ símbolo é usado
  2. Ele também verifica se há texto após o símbolo

Como o e-mail e a senha são obrigatórios, vamos adicionar o required atribuir a ambos os elementos. Também adicionaremos um minlength atributo para a entrada de senha.

<form id="dkh-signup-form">
  <div class="dkh-form-header">
    <div>
      <small>Sign up with</small>
      <div class="dkh-form-header__social-wrapper">
        <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-github">
          Github
        </button>
        <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-twitter">
          Twitter
        </button>
      </div>
    </div>
  </div>
  <div class="dkh-form-body">
    <small>Or sign in with email and password</small>
    <div class="dkh-form-field">
      <fieldset>
        <input autofocus class="dkh-form-field__input" name="email" type="email" id="email" required placeholder="Email">
      </fieldset>
      <div class="dkh-form-field__messages"></div>
    </div>
    <div class="dkh-form-field">
      <fieldset>
        <input class="dkh-form-field__input" name="password" type="password" id="password" required minlength="10" placeholder="Password">
      </fieldset>
      <div class="dkh-form-field__messages"></div>
    </div>
  </div>
  <div class="dkh-form-footer">
    <button class="dkh-btn dkh-btn-primary" type="submit">Sign Up</button>
  </div>
</form>

o type=email atributo informa ao navegador que ele deve validar a entrada como um e-mail.

o minlength atributo na entrada de senha nos dá esta mensagem de erro útil:

Agora, em nossa função handleSignupFormSubmit, podemos usar o API FormData para obter os valores de nosso formulário e, eventualmente, enviá-los a uma API.

function handleSignupFormSubmit(e) {
  // prevent default browser behaviour
  e.preventDefault();

  const formDataEntries = new FormData(signupForm).entries();
  const { email, password } = Object.fromEntries(formDataEntries);

  // submit email and password to an API
}

Mensagens de erro

As mensagens de erro renderizadas pelo navegador são úteis para iniciar, mas e se você quiser que essas mensagens sejam renderizadas abaixo de suas respectivas entradas de formulário? E se você quiser controlar sua aparência?

Infelizmente, o navegador não nos dá nenhum controle sobre como as mensagens de erro padrão são processadas. Então é aqui que nosso dkh-form-field__messages elementos div entram em jogo. Podemos renderizar nossas mensagens de erro personalizadas dentro desses elementos.

Vamos escrever algumas funções de validação personalizadas para verificar se a senha de nosso usuário e os valores de e-mail atendem aos requisitos.


function validatePassword(password, minlength) {
  if (!password) return 'Password is required';

  if (password.length < minlength) {
    return `Please enter a password that's at least ${minlength} characters long`;
  }

  const hasCapitalLetter = /[A-Z]/g;
  if (!hasCapitalLetter.test(password)) {
    return 'Please use at least one capital letter.';
  }

  const hasNumber = /d/g;
  if (!hasNumber.test(password)) {
    return 'Please use at least one number.';
  }

  return '';
}

function validateEmail(email) {
  if (!email) return 'Email is required';
    
  const isValidEmail = /^S+@S+$/g
  if (!isValidEmail.test(email)) {
    return 'Please enter a valid email';
  }

  return '';
}

O regex /^\S+@\S+$/g está longe de ser à prova de balas, mas pelo menos verifica se há caracteres antes e depois do @ símbolo.

A melhor forma de validar um e-mail é enviar um e-mail de confirmação para qualquer usuário que se inscrever. O usuário então teria que abrir esse e-mail e clicar em um link para confirmar que seu endereço de e-mail é válido.

Se você quiser se aprofundar na validação de e-mail do cliente, este é um ótimo fio.

Agora, vamos descobrir como processar as mensagens de erro na página.

function handleSignupFormSubmit(e) {
  // prevent default browser behaviour
  e.preventDefault();

  const formDataEntries = new FormData(signupForm).entries();
  const { email, password } = Object.fromEntries(formDataEntries);

  const emailErrorMessage = validateEmail(email);
  const passowrdErrorMessage = validatePassword(password);

  if (!emailErrorMessage) {
		// select the email form field message element
    const emailErrorMessageElement = document.querySelector('.email .dkh-form-field__messages');
    // show email error message to user
    emailErrorMessageElement.innerText = emailErrorMessage;
  }

  if (passowrdErrorMessage) {
		// select the email form field message element
    const passwordErrorMessageElement = document.querySelector('.password .dkh-form-field__messages');
    // show password error message to user
    passwordErrorMessageElement.innerText = passowrdErrorMessage;
  }
}

Vou chamar mais uma coisa: para que essas mensagens apareçam, precisamos remover o required atributos das entradas de e-mail e senha.

Precisamos alterar o valor do atributo type para a entrada de e-mail.

<input autofocus class="dkh-form-field__input" type="text" name="email" id="email" required placeholder="Email">

Também precisamos remover o minlength atributo da entrada de senha.

<input class="dkh-form-field__input" name="password" type="password" id="password" required placeholder="Password">

Atualizar esses atributos remove a validação baseada no navegador em favor de nossa própria lógica de validação. Veja como nossas mensagens de erro personalizadas serão processadas:

Estilos

Deixo o CSS para o final porque, na minha experiência pessoal, é um pouco mais difícil focar na lógica quando o design visual está completo.

Quando um componente ou página “parece” feito à vista, pode criar uma falsa sensação de que realmente foi feito. Não tenho nenhuma pesquisa para comprovar isso, apenas minha opinião pessoal.

Aqui está o estado do nosso código depois de adicionar um pouco de CSS.

Área de Trabalho

Móvel

Estado de Erro

eu incluí fonte incrível ícones para os botões Github e Twitter.

<div class="dkh-form-header">
  <div>
    <small>Sign up with</small>
    <div class="dkh-form-header__social-wrapper">
      <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-github">
        <i class="fab fa-github fa-lg"></i>
        Github
      </button>
      <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-twitter">
        <i class="fab fa-twitter fa-lg"></i>
        Twitter
      </button>
    </div>
  </div>
</div>

Resumo

Criamos os blocos de construção para criar formulários de inscrição e login sem bibliotecas de terceiros. Você pode verificar o código-fonte final aqui.

Se você estiver usando uma estrutura como React ou Vue, há uma tonelada de bibliotecas de formulários e validação incríveis. Você pode confiar neles para fazer o trabalho rapidamente.

No entanto, se você é novo no desenvolvimento de software, eu o encorajo a se concentrar nos fundamentos antes de usar essas ferramentas.

Consegui meu primeiro emprego como desenvolvedor há cinco anos e minha jornada na área de tecnologia mudou para sempre minha vida para melhor. Eu acredito que é importante focar e dominar os fundamentos para que você possa entender mais facilmente ferramentas como React e Vue.

Um dos problemas que percebi quando organizando um encontro por anos, eu mesmo era que as pessoas que eram novas em programação procuravam bibliotecas e estruturas muito rapidamente. Isso acabou prejudicando-os e muitos tiveram dificuldades durante as entrevistas.

Se você está aprendendo a programar e precisa de ajuda, sinta-se à vontade para entrar em contato comigo no Twitter. Estou ansioso para ajudar no que puder.





Fonte