Neste desafio sua missão é criar um formulário e seus 4 campos (com controlled inputs), juntamente com uma barra de progresso que altera-se conforme o usuário preenche os campos.
- Crie também validações para cada campo conforme instruções abaixo.
Para aproveitar estilização já definida, crie:
- a barra com um elemento pai chamado .bar-container e seu filho .bar
- input nome completo: válido se digitar no mínimo dois nomes,
- input email: válido se digitar um e-mail,
- select: estado civil,
- radio: gênero
Para validação de e-mail use a seguinte RegEx: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
Espera-se que o formulário tenha 4 campos ao todo. Portanto, quando o usuário preencher o primeiro campo, a barra de progresso deve assumir 25% do tamanho total; o segundo campo, 50% e assim por diante...
Caso o usuário não tenha definido valores para os elementos de select e radio, os mesmos não devem ser considerados como preenchidos até então.
Se o usuário preencher um campo e apagar seu valor, este campo deve ser considerado como vazio, fazendo com que a barra de progresso regrida novamente.
Desabilitar o botão de enviar caso todos os campos não estejam preenchidos/válidos.
Ao enviar, deve-se apresentar um alert javascript com sucesso, limpar todos os campos do formulário e zerar a barra de progresso novamente.