Como validar formulário com JavaScript e exibir mensagens de erro com SweetAlert2

Publicado 09 de outubro de 2024

Neste tutorial, será apresentado como validar um formulário com JavaScript e exibir mensagens de erro com SweetAlert2.

Primeiramente, será demonstrado como criar o formulário com HTML.

Em seguida, será explicado como validar os dados do formulário com JavaScript.

Por fim, será mostrado como apresentar as mensagens de erro com SweetAlert2.


Download do código fonte desenvolvido na aula: Download

Curso de PHP Developer: Mais Detalhes do Curso

Receber as aulas gratuitas do curso de PHP Developer: Acessar


Para começar, é criado o arquivo index.html, que contém a estrutura básica do HTML e um formulário para cadastrar o usuário, com os campos: nome, e-mail, senha e confirmação de senha.

Também devem ser incluídos o arquivo CSS styles.css, o arquivo JavaScript script.js e o arquivo JavaScript do SweetAlert2.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Celke - Cadastrar Usuário</title>

    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="form-container">

        <h1>Cadastrar Usuário</h1>

        <form name="formuser" action="#" method="POST">

            <input type="text" name="nome" placeholder="Nome completo">
            <input type="text" name="email" placeholder="Melhor e-mail">
            <input type="password" name="senha" placeholder="Senha com mínimo 6 caracteres">
            <input type="password" name="rep_senha" placeholder="Confirmar a senha">
            <input type="submit" onclick="return validar()" value="Cadastrar">

        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script src="script.js"></script>

</body>

</html>

Criado o arquivo styles.css com um estilo básico para o formulário.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
}

h1 {
    text-align: center;
    color: #333;
}

.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    margin-top: 50px; /* Adiciona espaçamento no topo */
}

.form-container form {
    display: flex;
    flex-direction: column;
}

.form-container input[type="text"],
.form-container input[type="password"] {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.form-container input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.form-container input[type="submit"]:hover {
    background-color: #218838;
}

.form-container input::placeholder {
    color: #888;
}

Para finalizar, é criado o arquivo script.js com a validação do formulário em JavaScript.

function validar(){

    // Receber os dados do formulário
    const nome = formuser.nome.value;
    const email = formuser.email.value;
    const senha = formuser.senha.value;
    const rep_senha = formuser.rep_senha.value;

    // Validação do Nome
    if(!validarNome(nome)){
        exibirAlerta('warning', 'Nome inválido', 'Preencha o campo nome!');
        return false;
    }

    // Validação do E-mail
    if(!validarEmail(email)){
        exibirAlerta('warning', 'E-mail inválido', 'Preencha o campo e-mail!');
        return false;
    }

    // Validação do Senha
    if(!validarSenha(senha)){
        exibirAlerta('warning', 'Senha inválida', 'Preencha o campo senha com mínimo 6 caracteres!');
        return false;
    }

    // Verificar se as senhas coincidem
    if(senha !== rep_senha){
        exibirAlerta('error', 'Senha senhas coincidem', 'O campo confirmação da senha deve ser igual à senha!');
        return false;
    }

    // Mensagem de sucesso se todas as validações passarem
    exibirAlerta('success', 'Tudo certo!', 'Formulário validado com sucesso.');

    // Retornar falso só para apresentar o alerta que passou pela validação
    return false;

    // return true;  // O formulário pode ser enviado

}

function validarNome(nome){
    return nome.trim().length > 0; // Verifica se o nome não está vazio
}

function validarEmail(email){
    const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Expressão regular para validar o formato de e-mail
    return regexEmail.test(email);
}

function validarSenha(senha){
    return senha.length > 5; // Verifica se a senha tem mais de 5 caracteres
}

function exibirAlerta(icone, titulo, texto){
    Swal.fire({
        icon: icone,
        title: titulo,
        text: texto,
      });
}

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido útil!