3
respostas

Submit com Erro

Quando digito o numero de CPF menor que o permitido, o formulário faz a critica, entretanto ao clicar no botão de "Cadastrar" o sistema faz o submit mesmo com o erro. Como corrigir?

3 respostas

Fala Marcos, tudo bem?

Poderia mandar o seu código pelo GitHub por favor?

Matheus, pensei q quando ocorresse o erro, o submit não funcionaria. Mas mesmo com o erro, está seguindo sim.


APP.JS

import React, { Component, Fragment } from 'react'
import './App.css';
import FormularioCadastro from './componets/FormularioCadastro/FormularioCadastro';
import {Container, Typography} from "@material-ui/core"
import "fontsource-roboto"

class App extends Component {

  render(){
    return (
      <Container component="article" maxWidth="sm">
        <Typography align="center" variant="h3" component="h1">Formulario de Cadastro</Typography>
        <FormularioCadastro aoEnviar={aoEnviarForm} validarCPF={validarCPF}></FormularioCadastro>
      </Container>

    );
  }
}

function aoEnviarForm(dados){
  console.log(dados)
}

function validarCPF(cpf){
    if(cpf.length !== 11 )
    {
      return {valido: false, texto: "CPF deve ter 11 digítos."}
    }
    else{
      return {valido: true, texto: ""}
    }
}

export default App;







FORMULARIOCADASTRO.JSX
import React, {useState} from 'react';
import { render } from '@testing-library/react'
import { TextField, Button, Switch, FormControlLabel } from "@material-ui/core"

function FormularioCadastro({aoEnviar, validarCPF}) {
    const [nome, setNome] = useState("");
    const [sobrenome, setSobrenome] = useState("");
    const [cpf, setCpf] = useState("");
    const [promocoes, setPromocoes] = useState(true);
    const [novidades, setNovidades] = useState(false);
    const [erros, setErros] = useState({cpf: {valido: true, texto: ""}});

    return (
        <form onSubmit={(event) => {
            event.preventDefault();
            aoEnviar({nome, sobrenome, cpf, promocoes, novidades})
        }}>
            <TextField 
                onChange={event => {
                    setNome(event.target.value)
                }}
                id="Nome" 
                value={nome}
                label="Nome"
                variant="outlined" 
                margin="normal" 
                fullWidth 
            />

            <TextField 
                onChange={event => {setSobrenome(event.target.value)}}
                id="Sobrenome" 
                value={sobrenome}
                label="Sobrenome" 
                variant="outlined" 
                margin="normal" 
                fullWidth 
            />

            <TextField 
                onChange={event => {setCpf(event.target.value)}}
                onBlur={(event) => {
                    const ehValido = validarCPF(event.target.value);

                    setErros({cpf: ehValido})
                }}
                id="CPF"
                error={!erros.cpf.valido}
                helperText={erros.cpf.texto}
                value={cpf}
                label="CPF" 
                variant="outlined" 
                margin="normal" 
                fullWidth 
            />


            <FormControlLabel label="Promoções" 
            control={<Switch onChange={(event) => {setPromocoes(event.target.checked)}} checked={promocoes} name="promocoes"color="primary"></Switch>}></FormControlLabel>

            <FormControlLabel label="Novidades" 
            control={<Switch onChange={(event) => {setNovidades(event.target.checked)}} name="novidades" checked={novidades} color="primary"></Switch>}></FormControlLabel>




            <Button type="submit" variant="contained" color="primary">Cadastrar</Button>
        </form>
    );

}

export default FormularioCadastro;

Marcos, verifique se nos componentes DadosPessoais e DadosUsuarios possuem a função possoEnviar, se sim e continua com o problema, nos mande aqui a função posso enviar e os outros componentes, por favor.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software