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?
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?
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.