-1

Como faço a validação do formulário criado com ReactJS de acordo com o que usuário informa nos campos?

Exemplo:

<form>
  <label for="tipo_requisicao">Escolha uma opção:</label>
  <!-- Campo obrigatório -->
  <select name="tipo_requisicao" id="tipo_requisicao">
    <option value="Aumento">Aumento de Quadro</option>
    <option value="Substituição">Substituíção</option>
  </select>

  <!-- Campo obrigatório apenas se escolher a opção "Aumento" no input acima "tipo_requisicao" -->
  <textarea id="story" name="story" rows="5" cols="33"></textarea>
</form>

Eu estou usando o React-Hook-Form para os meus formulários em ReactJS, mas pode ser qualquer exemplo ou dica de como fazer isso, seja via YUP com Formik, ou outro.

2
  • Assista o vídeo, veja a documentação, está tudo lá que você precisa saber. Commented 23/03/2021 às 17:45
  • Agradeço a dica, mas não tinha na documentação a forma de fazer isso. Consegui usando a Renderização Condicional do ReactJS. Commented 23/03/2021 às 20:43

1 Resposta 1

-1

Consegui fazer o que eu queria usando a Renderização Condicional .

Ficou assim:

<form>
  <label for="tipo_requisicao">Escolha uma opção:</label>
  <!-- Campo obrigatório -->
  <select name="tipo_requisicao" id="tipo_requisicao" ref={register({ required: true})}>
    <option value="Aumento">Aumento de Quadro</option>
    <option value="Substituição">Substituíção</option>
  </select>

  <!-- Campo obrigatório apenas se escolher a opção "Aumento" no input acima "tipo_requisicao" -->
  {tipo_requisicao === "Aumento" && 
    <textarea id="story" name="story" rows="5" cols="33" ref={register({ required: true})}></textarea>
  }
</form>

Devido o campo textarea ser renderizado apenas se o valor do campo tipo_requisicao for igual ao valor "Aumento", ele vai ser obrigatório apenas depois dele ser renderizado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .