Buenas, devs!
Estou desenvolvendo um cadastro de cliente em React.JS e preciso que alguns campos sejam validados, porém não estou conseguindo fazer com que funcione ou não estou sabendo colocar a função corretamente... basicamente o código está assim:
function CadastroCliente(props) {
const [dataNascimento, setDataNascimento] = useState('')
const [password, setPassword] = useState('')
const [confPassword, setConfPassword] = useState('')
const mascaraData = (value) => {
return value
.replace(/\D/g, "")
.replace(/(\d{2})(\d)/, "$1/$2")
.replace(/(\d{2})(\d)/, "$1/$2")
.replace(/(\d{4})(\d)/, "$1");
};
return (
<>
<FormDefault>
<div class="form-group col-md-3">
<Form.Label>Nascimento:</Form.Label>
<Form.Control type="dataNascimento" placeholder="Ex.: 29/02/1980" onChange={(event) => {
setDataNascimento(mascaraData(event.target.value))
}}
value={dataNascimento} required="true" />
</div>
<div class="form-group col-md-3">
<Form.Label>Inserir Senha:</Form.Label>
<Form.Control name="senha1" type="password" placeholder="Ex.: Abc123" onChange={(event) => {
setPassword(event.target.value)
}}
value={password} required="true" />
</div>
<div class="form-group col-md-3">
<Form.Label>Confirmar Senha:</Form.Label>
<Form.Control name="senha2" type="password" placeholder="Ex.: Abc123" onChange={(event) => {
setConfPassword(event.target.value)
}}
value={confPassword} required="true" />
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-4 d-flex justify-content-around">
<Button label="Cadastrar" type="submit" onClick={(event) => { Cadastrar(event) }} />
<Button label="Voltar" navigation route="login" class="apoio" />
</div>
</div>
</FormDefault>
</>
)
}
export default CadastroCliente
Pois bem, tentei me basear nos tutoriais e sei que é só comparar uma senha com confirmar senha e usar uma função simples para verificar se a data é válida ou não. Porém, acredito que estou com dificuldade onde chamar a função dentro do <Form.Control> e tentei colocar dentro do onChange, mas deu erro quando tento colocar dentro das { } e já estou há um bom tempo travado...
Se alguém puder ajudar, agradeço! Abração.