Chakra UI é uma biblioteca de componentes simples e eficaz, que permite aos desenvolvedores construir interfaces modernas e atraentes para o front-end de seus sites. Os desenvolvedores podem simplesmente usar os componentes predefinidos do Chakra UI em seu código React.js para trabalhar mais rapidamente e escrever menos. A melhor parte do Chakra UI é a sua reutilização, já que é uma biblioteca baseada em componentes.
Sempre que adquirimos dados do usuário por meio de formulários em nossos sites, é importante verificar se o usuário inseriu dados válidos. A validação de formulários é usada para esse propósito. Podemos realizar a validação de formulários no Chakra UI por meio de Form Control.
Abordagem: Vamos construir um formulário usando o Chakra UI. Usaremos os seguintes componentes para o mesmo.
- FormControl: é o componente de formulário de nível superior dentro do qual podemos colocar nossas entradas, botões e validações.
- FormLabel: permite-nos escrever rótulos para que o usuário saiba do que se trata o formulário. Por exemplo - nome, e-mail, senha, etc.
- FormErrorMessage: permite-nos mostrar um erro ao usuário quando a propriedade isInvalid dentro de FormControl é definida como true.
Vamos construir um formulário simples. Vamos pedir ao usuário seu nome, senha e e-mail. O nome será uma entrada "obrigatória" e a senha deve ter um comprimento de 8 caracteres. Realizaremos essas validações necessárias com a ajuda dos componentes acima mencionados.
Configurando a aplicação:
Passo 1: Crie uma nova pasta chamada chakra-form-validations. Abra o seu terminal, navegue até esta pasta e digite o seguinte comando:
npx create-react-app .
Passo 2: Isso instalará todos os arquivos iniciais necessários para você. Agora, vamos instalar a biblioteca Chakra UI usando o seguinte comando:
npm i @chakra-ui/react @emotion/react
npm i @emotion/styled framer-motion
Estrutura do projeto: A estrutura do projeto deve parecer com o abaixo:
Nota: Vamos usar o Tailwind CSS para estilizar. Para isso, dentro da pasta public, abra o arquivo index.html e use o link playCDN para o Tailwind CSS dentro da tag head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" ref="%PUBLIC_URL%/favicon.ico" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>Vamos seguir para os exemplos.
Exemplo 1: Validação de Senha
Dentro da pasta src, abra o arquivo App.js e insira o seguinte código:
import { useState } from "react";
import { FormControl, FormLabel, FormErrorMessage,
FormHelperText, Input, Button } from "@chakra-ui/react";
function App() {
const [passwordLength, setPasswordLength] = useState("");
const handlePasswordChange = (e) => {
setPasswordLength(e.target.value);
}
const error = passwordLength.length < 8
return (
<div className="flex flex-col justify-center
items-center my-44">
<h1 className="text-green-500 font-bold text-lg">A DEV IN DEV</h1>
<h2 className="font-semibold mt-2">
ReactJS Chakra UI Validação de formulário
</h2>
<FormControl className="shadow-lg p-8 rounded-lg mt-5"
isRequired isInvalid={error}>
<FormLabel>Nome</FormLabel>
<Input className="border border-gray-200
rounded-lg p-1 w-96"
type="text" placeholder="Seu nome..." />
<FormLabel className="mt-5">Senha</FormLabel>
<Input className="border border-gray-200
rounded-lg p-1 w-96"
value={passwordLength}
onChange={handlePasswordChange}
type="password"
placeholder="Sua senha..." />
{error ? (
<FormErrorMessage>
Senha menor que 8 caracteres...
</FormErrorMessage>
) : (
<FormHelperText>
Pronto para seguir...
</FormHelperText>
)}
<Button className="bg-blue-600 text-white
p-1.5 mx-5 rounded-lg mt-5"
type="submit">Enviar</Button>
</FormControl>
</div>
);
}
export default App;
Passos para executar a aplicação: Escreva o código abaixo no terminal para executar a aplicação:
npm run start
Explicação: Estamos usando o hook useState fornecido pelo React JS para armazenar o comprimento de nossa senha. E dentro de error, estamos armazenando a condição de que o comprimento da senha é maior que 8 caracteres. E então, estamos simplesmente verificando se o erro é verdadeiro ou falso usando um operador ternário e informando ao usuário se sua senha tem mais de 8 caracteres ou não.
Exemplo 2: Validação de E-mail
Dentro da pasta src, abra o arquivo App.js, onde faremos nossa validação de formulário. Abaixo está o código para o mesmo.
import { useState } from "react";
import { FormControl, FormLabel, Input, Button }
from "@chakra-ui/react";
function App() {
const [emailLength, setEmailLength] = useState("");
const handleEmailChange = (e) => {
setEmailLength(e.target.value);
}
const handleEmailError = (e) => {
e.preventDefault();
if (emailLength.indexOf("@") === -1) {
alert("E-mail deve conter @");
}
else {
alert("Pronto para seguir...");
}
}
return (
<div className="flex flex-col justify-center items-center my-44">
<h1 className="text-green-500 font-bold text-lg">A DEV IN DEV</h1>
<h2 className="font-semibold mt-2">
ReactJS Chakra UI Validação de formulário
</h2>
<FormControl className="shadow-lg p-8
rounded-lg mt-5"
isRequired>
<FormLabel>Nome</FormLabel>
<Input className="border border-gray-200
rounded-lg p-1 w-96"
type="text"
placeholder="Seu nome..." />
<FormLabel className="mt-5">E-mail</FormLabel>
<Input className="border border-gray-200
rounded-lg p-1 w-96"
value={emailLength}
onChange={handleEmailChange}
type="text"
placeholder="Seu e-mail..." />
<Button className="bg-blue-600 text-white p-1.5
mx-5 rounded-lg mt-5"
type="submit"
onClick={handleEmailError}>Enviar</Button>
</FormControl>
</div>
);
}
export default App;
Agora, volte a executar o projeto, use o comando:
npm run start
Explicação: Neste exemplo, estamos armazenando o e-mail do usuário com a ajuda do hook useState fornecido pelo React JS. E, quando o usuário envia o formulário, chamamos a função handleEmailError usando o evento onClick. Dentro desta função, estamos verificando se o caractere "@" existe no e-mail ou está faltando usando o método String indexOf. De acordo com isso, estamos fornecendo uma caixa de alerta informando ao usuário se seu e-mail está correto ou não.
Conclusão
Nesse simples passo a passo vimos como podemos fazer simples validações em formulário de forma rápida, esse simples tutorial teve como objetivo apenas mostrar que nem sempre precisamos de bibliotecas complexas para todo tipo de formulário, porém, é claro que conforme o tamanho do formulário e a quantidade de campos e dados aceitos, a melhor opção seria a busca por algo mais robusto, o que foge desse passo a passo. Vimos também como é fácil utilizar chakra ui para tirar proveito de seus componentes reutilizáveis, tornando nosso desenvolvimento mais rápido e pratico.