{"id":3973,"date":"2022-07-01T08:00:00","date_gmt":"2022-07-01T11:00:00","guid":{"rendered":"https:\/\/coodesh.com\/blog\/?p=3973"},"modified":"2022-07-01T10:22:04","modified_gmt":"2022-07-01T13:22:04","slug":"saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto","status":"publish","type":"post","link":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/","title":{"rendered":"Saiba como aplicar a valida\u00e7\u00e3o de campos no React no seu projeto"},"content":{"rendered":"\n<p>A valida\u00e7\u00e3o de campos no React \u00e9 aplicada para garantir que os dados colocados sejam fi\u00e9is ao que foi solicitado no input para o seu devido tratamento. Existem diversas ferramentas para fazer a valida\u00e7\u00e3o e voc\u00ea deve escolher aquela que melhor se encaixar no seu projeto, principalmente, nos quesitos usabilidade e desempenho.<\/p>\n\n\n\n<p>Nesse artigo, vamos abordar a valida\u00e7\u00e3o manual utilizando a biblioteca do Formik e Yup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Por que devemos validar formul\u00e1rios?<\/h2>\n\n\n\n<p>Imagine que voc\u00ea tem uma biblioteca para gerenciar com informa\u00e7\u00f5es inv\u00e1lidas comprometendo a comunica\u00e7\u00e3o com o cliente.<\/p>\n\n\n\n<p>Como voc\u00ea vai ligar para um usu\u00e1rio que em vez do n\u00famero de telefone colocou letras? Como \u00e9 poss\u00edvel fazer a cobran\u00e7a de algu\u00e9m que escreveu n\u00fameros aleat\u00f3rios no campo de CPF? Como mandar um e-mail para o usu\u00e1rio que deixou o campo em branco?<\/p>\n\n\n\n<p>A valida\u00e7\u00e3o dos campos de formul\u00e1rios veio com o objetivo de filtrar os dados para que essas informa\u00e7\u00f5es sejam devidamente preenchidas.&nbsp;<\/p>\n\n\n\n<p>Desse modo, algo que poderia facilitar a valida\u00e7\u00e3o e deixar mais intuitivo ao usu\u00e1rio seria a aplica\u00e7\u00e3o de m\u00e1scaras nos campos de formul\u00e1rio. Ali\u00e1s, sobre esse assunto, consulte o nosso conte\u00fado feito anteriormente sobre <a href=\"https:\/\/coodesh.com\/blog\/candidates\/carreiras\/saiba-como-adicionar-mascara-em-react-na-criacao-de-formularios\/\" target=\"_blank\" rel=\"noreferrer noopener\">como adicionar m\u00e1scaras em React<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quais dados devem ser validados?<\/h2>\n\n\n\n<p> Para fazer a valida\u00e7\u00e3o de campos no React, \u00e9 importante entender que podem ser validados os seguintes itens, entre outros:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Campos de CPF;<\/li><li>E-mail;<\/li><li>N\u00famero de telefone;<\/li><li>CEP;<\/li><li>Data;<\/li><li>Endere\u00e7o;<\/li><li>Nomes;<\/li><li>Senhas com campos obrigat\u00f3rios.&nbsp;<\/li><\/ul>\n\n\n\n<p>Portanto, todos os campos em que o usu\u00e1rio precisa escrever alguma informa\u00e7\u00e3o devem ser validados.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aplicando a valida\u00e7\u00e3o dos campos<\/h2>\n\n\n\n<p>Para o desenvolvimento da atividade de valida\u00e7\u00e3o de formul\u00e1rios vamos utilizar uma aplica\u00e7\u00e3o React.&nbsp;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/bd74c625718c0687a3b9706475d3c6a3.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Valida\u00e7\u00e3o padr\u00e3o do Js<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplo 01 &#8211; Validando nome, e-mail e senha obrigat\u00f3rios<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>\u00c9 necess\u00e1rio chamar o componente form. Dentro do form, colocaremos os inputs para a elabora\u00e7\u00e3o do formul\u00e1rio (nome, e-mail e senha).<\/li><li>A partir disso, voc\u00ea pode usufruir das op\u00e7\u00f5es, utilizar o required (caso seja obrigat\u00f3rio), exigir o m\u00ednimo\/m\u00e1ximo de caracteres, formatar para e-mail, entre outras a\u00e7\u00f5es que se fa\u00e7am necess\u00e1rias.&nbsp;<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/6dc534f409f4de42a8d5f64f20fcdf16.js\"><\/script>\n\n\n\n<p>Esse padr\u00e3o do Js auxilia nas valida\u00e7\u00f5es com as bibliotecas externas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Valida\u00e7\u00e3o com Formik e Yup<\/h3>\n\n\n\n<p>O Formik \u00e9 uma lib que auxilia na constru\u00e7\u00e3o de formul\u00e1rios. Ele fornece os componentes Form, Field e ErrorMessage.<\/p>\n\n\n\n<p>Para esse formul\u00e1rio, voc\u00ea vai precisar instalar o Formik e o Yup:<\/p>\n\n\n\n<p>Exemplo 01 &#8211; Validando e-mail e senha obrigat\u00f3rios<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\u00c9 necess\u00e1rio importar os componentes do Formik e o Yup:<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/7354e1e241b47a1d234c57da55e9271e.js\"><\/script>\n\n\n\n<p>Portanto, o Formik ser\u00e1 usado para passar as props, j\u00e1 o Form para passar os campos, o Field para passar as entradas, ErrorMessage para mostrar a mensagem de erro e, finalmente, o Yup para validar o campo.&nbsp;&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Criar uma constante informando o que o Yup dever\u00e1 validar. Lembre-se de nomear dentro das melhores pr\u00e1ticas do Clean Code. Para a nossa valida\u00e7\u00e3o, ele ser\u00e1 um objeto para e-mail e senha.&nbsp;<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/5249c51c8a7776bc5ebe57e4df22e3d9.js\"><\/script>\n\n\n\n<p>Para a valida\u00e7\u00e3o do e-mail e senha, eu coloquei o principal conforme a documenta\u00e7\u00e3o no Yup, contudo voc\u00ea tamb\u00e9m poder\u00e1 acrescentar algumas informa\u00e7\u00f5es para melhorar a valida\u00e7\u00e3o.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Elaborar o formul\u00e1rio. Agora chegou a hora de passar ao Formik os valores iniciais de e-mail e password.&nbsp;<\/li><\/ol>\n\n\n\n<p>Convencionalmente eu coloquei vazio, mas voc\u00ea pode deixar com alguma palavra pronta, e o Yup dentro do validationSchema que, por coincid\u00eancia, coloquei o mesmo nome \ud83d\ude48.<\/p>\n\n\n\n<p>Dentro do Form, passaremos o Field (recebendo type, name e placeholder) e o ErrorMessage informando se o name \u00e9 e-mail ou password para informar o erro escrito no yup.required.<\/p>\n\n\n\n<p>Observa\u00e7\u00e3o: coloquei component=\u2019div\u2019 a fim de que a mensagem apare\u00e7a embaixo do campo e n\u00e3o ao lado.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/c3bec8443e0885ff8a53cf4cb3141593.js\"><\/script>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>Resultado final<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/8622638aeabb36de0f3caf6ea06081c6.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplo 02 &#8211; Validando idade e data<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>O mesmo recurso usado para e-mail poder\u00e1 ser aplicado em outros campos de valida\u00e7\u00e3o.&nbsp;<\/li><\/ol>\n\n\n\n<p>Para a idade, por exemplo, acrescentei algumas informa\u00e7\u00f5es extras no Yup para uma valida\u00e7\u00e3o fidedigna.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/9079b691badb37f94cf403162eb3c240.js\"><\/script>\n\n\n\n<p>Para a idade e o ano de nascimento, informei que seriam n\u00fameros, preenchimento obrigat\u00f3rio e que deveria ser maior de 18 anos. Feito isso, apenas apliquei nos componentes. Pronto! Valida\u00e7\u00e3o conclu\u00edda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplo 03 &#8211; Validando rede social e CPF<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Para a valida\u00e7\u00e3o de rede social, utilizaremos regex e CPF em uma lib externa.<\/li><\/ol>\n\n\n\n<p>Voc\u00ea deve instalar o cpj-cnpj-validator:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/d7509caf5577f0dbada23b2b2be0328e.js\"><\/script>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Com o new RegExp, voc\u00ea ir\u00e1 elaborar o formato de URL que deve ser aceito no Yup pelo matches.<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/31edfcdf41e1617e654cd39e1a298e9a.js\"><\/script>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Para a verifica\u00e7\u00e3o do CPF, chamei o .test em que se verifica se o value (valor colocado pelo usu\u00e1rio) \u00e9 um CPF v\u00e1lido. N\u00e3o esque\u00e7a de importar o CPF do cpj-cnpj-validator.<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/ba8e448786c58cd34cfd4c0f60b3d556.js\"><\/script>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>E o resultado final do c\u00f3digo de valida\u00e7\u00e3o, rede social e CPF ficou assim:<\/li><\/ol>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/36532a743c14c37a5180bf7bc7775fa7.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Observa\u00e7\u00f5es<\/h3>\n\n\n\n<p>Voc\u00ea viu neste conte\u00fado algumas entre as diversas outras formas de validar um campo de formul\u00e1rio. O Formik \u00e9 uma das melhores op\u00e7\u00f5es juntamente com o Yup.&nbsp;<\/p>\n\n\n\n<p>\u00c9 importante ressaltar que voc\u00ea pode elaborar sua pr\u00f3pria l\u00f3gica de verifica\u00e7\u00e3o para validar, caso n\u00e3o queira consumir biblioteca de terceiros como a lib do CPF.<\/p>\n\n\n\n<p>Aproveite para conferir a documenta\u00e7\u00e3o usada clicando nos links:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/formik.org\/docs\/guides\/validation\">Documenta\u00e7\u00e3o Formik<\/a>;<\/li><li><a href=\"https:\/\/github.com\/jquense\/yup\">Documenta\u00e7\u00e3o Yup<\/a>;<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/cpf-cnpj-validator\">Documenta\u00e7\u00e3o CPF\/CNPJ<\/a>;<\/li><\/ul>\n\n\n\n<p>Documenta\u00e7\u00e3o Regex:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Guide\/Regular_Expressions\">https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Guide\/Regular_Expressions<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/RegExp\">https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/RegExp<\/a>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Ap\u00f3s a valida\u00e7\u00e3o de campos no React voc\u00ea estar\u00e1 livre para fazer os tratamentos necess\u00e1rios e evitar o gerenciamento de informa\u00e7\u00f5es inv\u00e1lidas.<\/p>\n\n\n\n<p>Pensando na melhor experi\u00eancia ao usu\u00e1rio, \u00e9 importante aplicar m\u00e1scaras nos formul\u00e1rios para que fique intuitivo ao usu\u00e1rio e voc\u00ea tenha um controle maior das informa\u00e7\u00f5es.Esse foi mais um artigo t\u00e9cnico da Coodesh? J\u00e1 se increveu na nossa plataforma para ter seus conhecimentos validados e se candidatar nas vagas de emprego? <a href=\"https:\/\/coodesh.com\/desenvolvedores\">Saiba mais<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A valida\u00e7\u00e3o de campos no React \u00e9 aplicada para garantir que os dados colocados sejam fi\u00e9is ao que foi solicitado no input para o seu devido tratamento. Existem diversas ferramentas para fazer a valida\u00e7\u00e3o e voc\u00ea deve escolher aquela que melhor se encaixar no seu projeto, principalmente, nos quesitos usabilidade e desempenho. Nesse artigo, vamos [&hellip;] <a class=\"g1-link g1-link-more\" href=\"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/\">Ler mais<\/a><\/p>\n","protected":false},"author":9,"featured_media":4021,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[472,474,21],"tags":[827,828,825,829,188,501,826],"class_list":{"0":"post-3973","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"category-fullstack","9":"category-candidates","10":"tag-clean-code","11":"tag-formik","12":"tag-formularios","13":"tag-gerenciamento-de-dados","14":"tag-usuario","15":"tag-validacao","16":"tag-yup"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Valida\u00e7\u00e3o de campos no React: saiba como usar<\/title>\n<meta name=\"description\" content=\"Veja como funciona uma das op\u00e7\u00f5es de valida\u00e7\u00e3o de campos em React para permitir uma melhor experi\u00eancia ao usu\u00e1rio e uma boa gest\u00e3o de dados.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Valida\u00e7\u00e3o de campos no React: saiba como usar\" \/>\n<meta property=\"og:description\" content=\"Veja como funciona uma das op\u00e7\u00f5es de valida\u00e7\u00e3o de campos em React para permitir uma melhor experi\u00eancia ao usu\u00e1rio e uma boa gest\u00e3o de dados.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-01T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T13:22:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/06\/campos-no-react-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andreyna Carvalho\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andreyna Carvalho\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/\"},\"author\":{\"name\":\"Andreyna Carvalho\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/person\\\/daed196213bd7a7cd96924ff38e42019\"},\"headline\":\"Saiba como aplicar a valida\u00e7\u00e3o de campos no React no seu projeto\",\"datePublished\":\"2022-07-01T11:00:00+00:00\",\"dateModified\":\"2022-07-01T13:22:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/\"},\"wordCount\":1037,\"publisher\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/campos-no-react-scaled.jpg\",\"keywords\":[\"clean code\",\"Formik\",\"formul\u00e1rios\",\"gerenciamento de dados\",\"usu\u00e1rio\",\"valida\u00e7\u00e3o\",\"Yup\"],\"articleSection\":[\"Front-end\",\"Full-Stack\",\"Pessoas Candidatas\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/\",\"name\":\"Valida\u00e7\u00e3o de campos no React: saiba como usar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/campos-no-react-scaled.jpg\",\"datePublished\":\"2022-07-01T11:00:00+00:00\",\"dateModified\":\"2022-07-01T13:22:04+00:00\",\"description\":\"Veja como funciona uma das op\u00e7\u00f5es de valida\u00e7\u00e3o de campos em React para permitir uma melhor experi\u00eancia ao usu\u00e1rio e uma boa gest\u00e3o de dados.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#primaryimage\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/campos-no-react-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/campos-no-react-scaled.jpg\",\"width\":2560,\"height\":1440,\"caption\":\"campos no react\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pessoas Candidatas\",\"item\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/candidates\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Saiba como aplicar a valida\u00e7\u00e3o de campos no React no seu projeto\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/\",\"name\":\"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o\",\"description\":\"Conte\u00fados para ajudar sua empresa a contratar profissionais de tecnologia e dicas para programadores sobre: carreira, hard skills e soft skills. Confira! \",\"publisher\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#organization\",\"name\":\"Coodesh\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Original2x.png\",\"contentUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Original2x.png\",\"width\":800,\"height\":246,\"caption\":\"Coodesh\"},\"image\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/person\\\/daed196213bd7a7cd96924ff38e42019\",\"name\":\"Andreyna Carvalho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g\",\"caption\":\"Andreyna Carvalho\"},\"description\":\"Sempre levei a tecnologia e a paix\u00e3o pelos c\u00f3digos al\u00e9m de uma simples forma de trabalho. Estou focada em me aprofundar e conseguir impactar as pessoas com novas tecnologias. Hoje sou DevRel na Coodesh.\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/author\\\/andreyna\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Valida\u00e7\u00e3o de campos no React: saiba como usar","description":"Veja como funciona uma das op\u00e7\u00f5es de valida\u00e7\u00e3o de campos em React para permitir uma melhor experi\u00eancia ao usu\u00e1rio e uma boa gest\u00e3o de dados.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/","og_locale":"pt_BR","og_type":"article","og_title":"Valida\u00e7\u00e3o de campos no React: saiba como usar","og_description":"Veja como funciona uma das op\u00e7\u00f5es de valida\u00e7\u00e3o de campos em React para permitir uma melhor experi\u00eancia ao usu\u00e1rio e uma boa gest\u00e3o de dados.","og_url":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/","og_site_name":"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o","article_published_time":"2022-07-01T11:00:00+00:00","article_modified_time":"2022-07-01T13:22:04+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/06\/campos-no-react-scaled.jpg","type":"image\/jpeg"}],"author":"Andreyna Carvalho","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andreyna Carvalho","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#article","isPartOf":{"@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/"},"author":{"name":"Andreyna Carvalho","@id":"https:\/\/coodesh.com\/blog\/#\/schema\/person\/daed196213bd7a7cd96924ff38e42019"},"headline":"Saiba como aplicar a valida\u00e7\u00e3o de campos no React no seu projeto","datePublished":"2022-07-01T11:00:00+00:00","dateModified":"2022-07-01T13:22:04+00:00","mainEntityOfPage":{"@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/"},"wordCount":1037,"publisher":{"@id":"https:\/\/coodesh.com\/blog\/#organization"},"image":{"@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#primaryimage"},"thumbnailUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/06\/campos-no-react-scaled.jpg","keywords":["clean code","Formik","formul\u00e1rios","gerenciamento de dados","usu\u00e1rio","valida\u00e7\u00e3o","Yup"],"articleSection":["Front-end","Full-Stack","Pessoas Candidatas"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/","url":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/","name":"Valida\u00e7\u00e3o de campos no React: saiba como usar","isPartOf":{"@id":"https:\/\/coodesh.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#primaryimage"},"image":{"@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#primaryimage"},"thumbnailUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/06\/campos-no-react-scaled.jpg","datePublished":"2022-07-01T11:00:00+00:00","dateModified":"2022-07-01T13:22:04+00:00","description":"Veja como funciona uma das op\u00e7\u00f5es de valida\u00e7\u00e3o de campos em React para permitir uma melhor experi\u00eancia ao usu\u00e1rio e uma boa gest\u00e3o de dados.","breadcrumb":{"@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#primaryimage","url":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/06\/campos-no-react-scaled.jpg","contentUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/06\/campos-no-react-scaled.jpg","width":2560,"height":1440,"caption":"campos no react"},{"@type":"BreadcrumbList","@id":"https:\/\/coodesh.com\/blog\/candidates\/saiba-como-aplicar-a-validacao-de-campos-no-react-no-seu-projeto\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coodesh.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Pessoas Candidatas","item":"https:\/\/coodesh.com\/blog\/candidates\/"},{"@type":"ListItem","position":3,"name":"Saiba como aplicar a valida\u00e7\u00e3o de campos no React no seu projeto"}]},{"@type":"WebSite","@id":"https:\/\/coodesh.com\/blog\/#website","url":"https:\/\/coodesh.com\/blog\/","name":"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o","description":"Conte\u00fados para ajudar sua empresa a contratar profissionais de tecnologia e dicas para programadores sobre: carreira, hard skills e soft skills. Confira! ","publisher":{"@id":"https:\/\/coodesh.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/coodesh.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/coodesh.com\/blog\/#organization","name":"Coodesh","url":"https:\/\/coodesh.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/coodesh.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2020\/08\/Original2x.png","contentUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2020\/08\/Original2x.png","width":800,"height":246,"caption":"Coodesh"},"image":{"@id":"https:\/\/coodesh.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/coodesh.com\/blog\/#\/schema\/person\/daed196213bd7a7cd96924ff38e42019","name":"Andreyna Carvalho","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g","caption":"Andreyna Carvalho"},"description":"Sempre levei a tecnologia e a paix\u00e3o pelos c\u00f3digos al\u00e9m de uma simples forma de trabalho. Estou focada em me aprofundar e conseguir impactar as pessoas com novas tecnologias. Hoje sou DevRel na Coodesh.","url":"https:\/\/coodesh.com\/blog\/author\/andreyna\/"}]}},"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts\/3973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/comments?post=3973"}],"version-history":[{"count":4,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts\/3973\/revisions"}],"predecessor-version":[{"id":4022,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts\/3973\/revisions\/4022"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/media\/4021"}],"wp:attachment":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/media?parent=3973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/categories?post=3973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/tags?post=3973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}