1
resposta

Validação de "confirmar senha" e data de nascimento válido (bissexto) no <Form.Control>

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.

1 resposta

Fala Leandro, tudo bem? Espero que sim!

Quais dificuldades você está enfrentando? Esta dando algum erro? Poderia detalhar um pouco mais sobre o que esta tentando fazer? Talvez explicar o porque de utilizar a função também. Assim consigo me contextualizar melhor e te ajudar da melhor forma possivel!

Aguardo o retorno :D