[Dúvida] Tratamento de erros e submeter formulario | Typescript parte 3: mais técnicas e boas práticas

Boa tarde

Eu tenho os codigos de um formulario e validação, mas não estou conseguindo finalizar, as mensagens de erro ainda não funcionam 100%, preciso ajustar isso e tambem codigo javascript para submeter o formulario

CODIGO HTML

Nome Completo Digite o seu nome completo

            <div class="formulario__campo">
                <label class="campo__dado__pessoal dado__contato" for="telefone">Contato Telefone</label>
                <input class="dado_pessoal__contato" name="telefone" id="telefone" type="tel" placeholder="(XX) XXXXX-XXXX" class="campo__escrita"
                    required minlength="9" maxlength="15"/>
                    <span class="mensagem_erro">Número completo do telefone, apenas números</span>
            </div>
            <div class="formulario__campo">
                <label class="campo__dado__pessoal dado__email" for="email">E-mail</label>
                <input class="dado_pessoal__email" name="email" id="email" type="email" class="campo__escrita" required placeholder="Digite seu email" minlength="4"/>
                <span class="mensagem_erro">Digite um email válido</span>
            </div>
            <div class="formulario__campo">
                <label class="campo__dado__pessoal dado__mensagem" for="mensagem">Mensagem</label>
                <textarea class="dado_pessoal__mensagem" name="mensagem" id="mensagem" type="text" class="campo__escrita" placeholder="Digite sua mensagem" minlength="20" required></textarea>
                <span class="mensagem_erro">A mensagem deve ter no mínimo 20 caracteres</span>
            </div>
            <button class="botao-submit" type="submit" for="submit" id="submit" name="submit">Enviar</button>
        </form>

CODIGO JAVSCRIPT

const form = document.getElementById('formulario_para_contato'); const spans = document.querySelectorAll('.mensagem_erro'); const emailRegex = /^\w+([-+.']\w+)*@\w+([-.]\w+).\w+([-.]\w+)$/;

const inputNome = document.getElementById('nome'); inputNome.addEventListener('blur', validacaoNome);

const inputTelefone = document.getElementById('telefone'); inputTelefone.addEventListener('blur', validacaoTelefone);

const inputEmail = document.getElementById('email'); inputEmail.addEventListener('blur', validacaoEmail);

const inputMensagem = document.getElementById('mensagem'); inputMensagem.addEventListener('blur', validacaoMensagem);

// VALIDACAO CAMPO NOME

function setError(index){

inputNome.style.border = '3px solid #E63636';

inputTelefone.style.border = '3px solid #E63636';

inputEmail.style.border = '3px solid #E63636';

inputMensagem.style.border = '3px solid #E63636';

spans[index].style.display = 'block';
spans[index].style.padding = '5px';
spans[index].style.color = '#E63636';
spans[index].style.fontWeight = 'bold';

}

function removeError(index){

inputNome.style.border = '';
spans[index].style.display = 'none';

inputTelefone.style.border = '';
spans[index].style.display = 'none';

inputEmail.style.border = ''; 
spans[index].style.display = 'none';

inputMensagem.style.border = '';
spans[index].style.display = 'none';

}

// VALIDACAO CAMPO NOME

function validacaoNome(){

const value = inputNome.value;
if(value.length <= 3){
    setError(0)
} else {
    removeError(0)
}

}

// VALIDACAO CAMPO TELEFONE

function validacaoTelefone(){

const value = inputTelefone.value;
if(value.length <= 9){
    setError(1)
} else {
    removeError(1)
}

}

// VALIDACAO CAMPO EMAIL

function validacaoEmail(){

if(!emailRegex.test(inputEmail.value)){
    setError(2)
} else {
    removeError(2)
}

}

// VALIDACAO CAMPO MENSAGEM

function validacaoMensagem(){

const value = inputMensagem.value;
if(value.length <= 20){
    setError(3)
} else {
    removeError(3)
}

}

form.addEventListener('submit', (event) => { event.preventDefault()

validacaoNome();
validacaoTelefone();
validacaoEmail();
validacaoMensagem()

alert('Formulario enviado com sucesso!')

})

1. Mensagens de Erro:

No seu código, você está usando as funções setError e removeError para exibir e ocultar mensagens de erro. No entanto, você está aplicando os estilos e removendo os estilos para todos os campos (nome, telefone, email, mensagem) sempre que ocorre um erro em qualquer um deles. Isso pode estar causando a exibição de mensagens de erro para todos os campos ao mesmo tempo.

Para corrigir isso, você precisa modificar essas funções para aplicar estilos apenas ao campo correspondente. Aqui está um exemplo para o campo de nome:

function setError(index) {
    const inputField = document.getElementById('nome');
    inputField.style.border = '3px solid #E63636';
    spans[index].style.display = 'block';
    // ... outras estilizações
}

function removeError(index) {
    const inputField = document.getElementById('nome');
    inputField.style.border = '';
    spans[index].style.display = 'none';
    // ... outras remoções de estilos
}

Faça alterações semelhantes para os outros campos (telefone, email, mensagem) nas funções setError e removeError.

2. Envio do Formulário:

Parece que você está tentando enviar o formulário após a validação usando alert('Formulario enviado com sucesso!'). No entanto, para enviar o formulário, você deve remover o event.preventDefault() no seu evento de envio e permitir que o formulário seja enviado. Atualize o código da seguinte maneira:

form.addEventListener('submit', (event) => {
    // Remova o event.preventDefault() para permitir o envio do formulário
    // event.preventDefault();

    validacaoNome();
    validacaoTelefone();
    validacaoEmail();
    validacaoMensagem();

    // Remova o alert e permita que o formulário seja enviado
    // alert('Formulario enviado com sucesso!');
});

Remova o event.preventDefault() para permitir o envio real do formulário. O alert pode ser substituído pela lógica de envio real do formulário para o servidor. E tenha certeza de que seu formulário tenha um atributo action que aponte para o URL do servidor para onde os dados do formulário serão enviados.